:root {
  --bg: #f4f5f7;       /* Fondo principal */
  --panel: #ffffff;    /* Paneles / tarjetas */
  --panel2: #f0f0f0;
  --line: #d0d0d0;
  --text: #222222;     /* Texto principal oscuro */
  --muted: #555555;
  --accent: #0077b6;   /* Azul profesional */
  --primary: #198754;  /* Verde serio */
}

* { box-sizing: border-box; }
html,body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
/* Contenedor base */
.container {
  width: 100%;
  max-width: 980px; /* sigue limitando en escritorio */
  margin: 0 auto;
  padding: 0 1rem; /* respiro a los lados en móvil */
  box-sizing: border-box;
}

/* Grid de héroe (texto + video) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 768px) {
  .grid-2 {
    grid-template-columns: 1fr; /* 1 sola columna en móvil */
  }
}

/* Iframe responsive */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}
.video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Cards responsivas */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}


.flex { display:flex; }
.between { justify-content: space-between; }
.center-v { align-items: center; }
.gap { gap:12px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:960px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.video-wrap{
  position:relative; width:100%; padding-top:56.25%; /* 16:9 */
  border-radius:16px; overflow:hidden; background:#000;
}
.video-wrap iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  display:block;
}

.topbar {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(1.2) blur(6px);
  background: #ffffffcc;
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
.brand {
  display:flex; gap:10px; align-items:center;
  text-decoration:none; color:var(--text); font-weight:800;
}
.nav { display:flex; gap:14px; }
.nav a {
  color: var(--text);
  text-decoration:none;
  padding:8px 10px;
  border-radius:10px;
}
.nav a:hover,.nav a.active { background: var(--panel2); }

.btn {
  background: var(--primary);
  color:#fff;
  text-decoration:none;
  border:none;
  padding:10px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  display:inline-block;
}
.btn.ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
.link { color:var(--accent); text-decoration:none; }

.hero {
  border-bottom:1px solid var(--line);
  background: radial-gradient(70% 60% at 10% 20%, #e1e9f5, #f4f5f7 60%);
  padding:28px 0;
}
.hero h1 {
  font-size: clamp(28px,4vw,44px);
  line-height:1.1;
  margin:0 0 8px;
}
.hero .cta { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:900px){.cards{grid-template-columns:1fr;} }
.card {
  background: var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}

.service-list { display:grid; gap:10px; margin:0; padding-left:18px; }
.badges {
  display:flex; flex-wrap:wrap;
  gap:10px; list-style:none; padding:0;
}
.badges li {
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
}

.timeline { display:grid; gap:14px; }
.t-item {
  border-left:3px solid var(--primary);
  padding:8px 12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left-color:var(--primary);
  border-radius:10px;
}

.cta-bar {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background: linear-gradient(90deg,#f0f4f8,#e6ebf2);
  padding:14px 0;
}
.footer {
  border-top:1px solid var(--line);
  background:#f0f0f0;
  padding:18px 0;
}
.muted { color: var(--muted); }

.form { display:grid; gap:14px; }
.form label { display:grid; gap:6px; }
.form input,.form select,.form textarea {
  width:100%;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  padding:10px;
}
.form input:focus,.form select:focus,.form textarea:focus {
  outline:2px solid var(--accent);
}
.map iframe { width:100%; min-height:360px; border:0; border-radius:14px; }

.foot-nav { display:flex; flex-wrap:wrap; gap:10px; }

.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--panel2);
  border-top: 1px solid var(--line);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  z-index: 999;
}
.cookie-banner p { margin: 0; color: var(--text); }
.cookie-banner a { color: var(--accent); text-decoration: underline; }
.cookie-banner button { padding: 8px 14px; }

/* --- Ajustes base para evitar scroll horizontal y mejorar legibilidad --- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, iframe, video { max-width: 100%; height: auto; display: block; }
.container { width: min(1100px, 100%); padding: 16px; margin-inline: auto; }
.hero { padding: 32px 0; } /* un poco más de aire */

/* --- Grids responsivos --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 960px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero { padding: 28px 0; }
}

/* --- Tipografía fluida --- */
.hero h1 { font-size: clamp(24px, 6vw, 44px); line-height: 1.15; margin: 0 0 10px; }
h2 { font-size: clamp(20px, 3.6vw, 28px); }
h3 { font-size: clamp(17px, 2.9vw, 20px); }

/* --- Botones y CTA adaptables --- */
.hero .cta { display:flex; gap:10px; flex-wrap:wrap; }
.btn { padding: 11px 16px; border-radius: 12px; }
@media (max-width: 480px) {
  .btn, .link { width: 100%; text-align: center; }
}

/* --- Header/nav más cómodo en móvil (base) --- */
.topbar { position: sticky; top: 0; z-index: 10; }
.brand { gap: 8px; font-weight: 800; }
.nav { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .container.flex.between.center-v { flex-wrap: wrap; gap: 8px; }
  .nav { width: 100%; overflow-x: auto; padding-bottom: 4px; }
  .nav a { white-space: nowrap; }
}

/* --- Cards responsivas --- */
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .cards { grid-template-columns: 1fr; } }
.card { background: var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; }

/* --- Iframe completamente responsivo --- */
.video-wrap{ position:relative; width:100%; padding-top:56.25%; border-radius:16px; overflow:hidden; background:#000; }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* --- Formularios: targets grandes en móvil --- */
.form { display:grid; gap:14px; }
.form input, .form select, .form textarea { font-size: 16px; } /* evita zoom iOS */

/* ====== Hamburguesa + menú colapsable ====== */
.hamburger{
  display:none; position:relative; width:38px; height:38px;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  cursor:pointer; align-items:center; justify-content:center; gap:4px; padding:6px;
}
.hamburger span{
  display:block; width:22px; height:2px; background:#222; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}

/* Menú colapsable (móvil) */
@media (max-width: 768px){
  .hamburger{ display:flex; }
  /* el nav normal pasa a columna y se oculta por defecto */
  .nav[data-collapsible]{
    position: relative;
    width:100%;
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
    margin-top:10px;
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease, padding .25s ease;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:0 12px;
  }
  /* visible cuando se abre */
  .nav[data-collapsible].open{
    max-height: 320px; /* suficiente para 4–6 enlaces */
    padding:12px;
  }
  .nav[data-collapsible] a{
    padding:10px 8px;
    border-radius:10px;
  }

  /* animación del ícono */
  .hamburger[aria-expanded="true"] span:nth-child(1){
    transform: translateY(6px) rotate(45deg);
  }
  .hamburger[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }
  .hamburger[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-6px) rotate(-45deg);
  }
}


/* --- NAV RESPONSIVO --- */
/* ----- Estilos del botón hamburguesa ----- */
.hamburger {
  font-size: 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* oculto en desktop */
  color: #333;
  z-index: 1001;
}

.hamburger:focus {
  outline: 2px solid #0077cc;
  outline-offset: 4px;
}

/* ----- Menú principal ----- */
.nav {
  display: flex;
  gap: 1rem;
}

.nav a {
  text-decoration: none;
  padding: 8px 12px;
  transition: color 0.3s;
}

.nav a:hover {
  color: #0077cc;
}

/* ----- Versión móvil ----- */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }

  .nav {
    position: fixed;
    top: 0;
    right: -100%; /* oculto fuera de pantalla */
    width: 250px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 6px rgba(0,0,0,0.2);
    flex-direction: column;
    padding: 4rem 1rem;
    gap: 1.5rem;
    transition: right 0.4s ease-in-out; /* animación */
    z-index: 1000;
  }

  .nav.open {
    right: 0; /* entra con slide */
  }

  .nav a {
    font-size: 1.2rem;
  }
}