/* ============================
   TAMA — styles.css
   Mobile-first responsive CSS
   Variables at top for easy theming
   ============================ */

/* Color palette extracted del logo (principal) y variantes */
:root{
  --color-primary: #314262;        /* extraído del logo (azul base) */
  --color-primary-700: #2a3853;    /* versión más oscura */
  --color-primary-300: #5b7bb3;    /* versión más clara / acento */
  --bg: #ffffff;
  --gray-100: #f8f9fb;
  --gray-200: #f2f4f7;
  --text: #222222;
  --muted: #666d78;
  --max-width: 1200px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --radius: 12px;

  /* Fonts */
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Utility container */
.container{
  width:90%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:var(--space-lg) 0;
}

/* Header */
.site-header{
  border-bottom:1px solid var(--gray-200);
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.95));
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(2px);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:var(--space-md);
}

.brand{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
}

.logo{
  height:44px;
  width:auto;
  display:block;
}

.since{
  font-family:var(--font-heading);
  font-size:0.85rem;
  color:var(--muted);
}

/* Nav */
.main-nav{margin-left:auto; display:none}
.main-nav.open{display:block}
.nav-list{list-style:none;padding:0;margin:0;display:flex;gap:var(--space-md);flex-wrap:wrap}
.nav-list a{
  text-decoration:none;
  color:var(--color-primary-700);
  font-weight:600;
  font-family:var(--font-heading);
}
.header-contact{margin-left:var(--space-md); display:none}
.header-email{text-decoration:none;color:var(--muted);font-weight:600}

/* Nav toggle (mobile) */
.nav-toggle{
  background:none;border:0;padding:0;margin-left:auto;height:44px;width:44px;display:flex;align-items:center;justify-content:center;
}
.hamburger{
  display:block;width:22px;height:2px;background:var(--color-primary);position:relative;border-radius:1px;
}
.hamburger::before,.hamburger::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:var(--color-primary);border-radius:1px;
}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}

/* HERO / Carousel */
.hero-section{padding:var(--space-lg) 0}
.carousel{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--gray-100)}
.carousel-track{display:flex;transition:transform 450ms ease;}
.carousel-slide{min-width:100%;position:relative}
.carousel-img{width:100%;height:320px;object-fit:cover;display:block}
/* caption */
.slide-caption{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,0.45);color:#fff;padding:0.75rem 1rem;border-radius:8px}
.slide-caption h2{margin:0;font-family:var(--font-heading);font-size:1.1rem}

/* Carousel controls */
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:0;padding:0.5rem 0.6rem;border-radius:8px;cursor:pointer;
  font-weight:700;color:var(--color-primary);
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.carousel-btn.prev{left:0.5rem}
.carousel-btn.next{right:0.5rem}

/* Sections */
.section{padding:var(--space-xl) 0}
.section-title{font-family:var(--font-heading);font-size:1.25rem;margin-bottom:var(--space-md);color:var(--color-primary-700)}

/* Product layout: stacked on mobile */
.product{display:grid;grid-template-columns:1fr;gap:var(--space-md);align-items:start;padding:var(--space-lg) 0;border-bottom:1px solid var(--gray-200)}
.product-img{width:100%;height:240px;object-fit:cover;border-radius:8px}
.product-content h2{font-family:var(--font-heading);margin-top:0;color:var(--color-primary)}
.product-content h3{margin-bottom:0.5rem;color:var(--color-primary-700)}

/* Projects grid */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-md);
}
.project-thumb{width:100%;height:auto;object-fit:cover;border-radius:6px}

/* Quienes somos layout */
.grid-two{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-bottom:var(--space-md)}
.box{background:var(--gray-100);padding:var(--space-md);border-radius:8px}

/* Contacto */
.contacto-section a{color:var(--color-primary);text-decoration:none;font-weight:600}

/* Footer */
.site-footer{border-top:1px solid var(--gray-200);background:var(--bg);padding:var(--space-lg) 0}
.footer-inner{display:flex;flex-direction:column;gap:var(--space-md)}
.footer-legal{color:var(--muted);font-size:0.95rem}

/* Accessibility focus outlines */
a:focus, button:focus {outline:3px solid rgba(49,66,98,0.18);outline-offset:2px}

/* ============================
   Media Queries (tablet & desktop)
   Breakpoints:
   - tablet: min-width 768px
   - desktop: min-width 1024px
   ============================ */
@media(min-width:768px){
  .nav-toggle{display:none}
  .main-nav{display:block}
  .header-contact{display:block}
  .container{padding:var(--space-xl) 0}
  .carousel-img{height:420px}
  .product{grid-template-columns: 1fr 1fr; gap:var(--space-lg)}
  .projects-grid{grid-template-columns:repeat(4,1fr)}
  .grid-two{grid-template-columns:repeat(2,1fr)}
  .footer-inner{flex-direction:row;justify-content:space-between;align-items:center}
}

@media(min-width:1024px){
  .carousel-img{height:520px}
  .product-img{height:420px}
  .slide-caption h2{font-size:1.25rem}
}

/* Comments:
 - All images are responsive. Reemplaza los archivos en /img manteniendo los nombres.
 - Evitar anchos fijos; se usan % y unidades relativas.
 - Cambia variables en :root para retocar la paleta.
*/