/* =========================================================
   alzavuelo.dev · Estilos de la página
   Índice:
   1. Colores y fuente (variables)
   2. Base
   3. Botones
   4. Cabecera y menú
   5. Portada
   6. Portada: computadora y celular con capturas reales
   7. Secciones (estructura común)
   8. Quiénes somos
   9. Servicios
   10. Para tu rubro
   11. Cómo trabajamos
   12. Por qué alzavuelo
   13. Preguntas frecuentes
   14. Contacto
   15. Pie de página
   16. Celular y tablet
   ========================================================= */


/* 1. Colores y fuente ------------------------------------ */
/* Si cambias un color aquí, cambia en toda la página.
   Estilo formal: azul marino como base, azul acero para detalles
   y el naranja de la marca solo en los botones principales. */
:root {
  --marino: #0A1B33;       /* fondo oscuro de la marca */
  --marino-2: #112848;
  --linea-osc: #243F66;
  --azul: #2D5A94;         /* detalles: títulos pequeños, íconos */
  --azul-suave: #EAF0F8;   /* fondo de los íconos */
  --claro: #F5F7FA;        /* fondo de cajas pequeñas */
  --fondo: #EEF2F8;        /* fondo general de la página (azul grisáceo muy suave) */
  --fondo-2: #E2E9F3;      /* fondo de las secciones alternas */
  --blanco: #FFFFFF;       /* tarjetas, formulario y ventanas */
  --tinta: #132238;        /* texto principal */
  --gris: #556278;         /* texto secundario */
  --linea: #DFE4EC;        /* bordes */
  --naranja: #E9762B;      /* color de la marca (botones) */
  --naranja-osc: #CC611C;
  --sobre-osc: #B3C1D8;    /* texto secundario sobre fondo oscuro */
  --fuente: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}


/* 2. Base ------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; }
a { color: inherit; }
[hidden] { display: none !important; }   /* lo que JS oculta siempre queda oculto */
h1, h2, h3 { margin: 0; line-height: 1.15; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

/* Contenedor central: limita el ancho y deja margen a los lados */
.ancho { max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }


/* 3. Botones --------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border: 0; border-radius: 8px;
  font: 700 15px/1 var(--fuente); text-decoration: none; cursor: pointer;
  transition: background .15s;
}
.boton-naranja { background: var(--naranja); color: #fff; }
.boton-naranja:hover { background: var(--naranja-osc); }
.boton-marino { background: var(--marino); color: #fff; }
.boton-marino:hover { background: var(--marino-2); }
.boton-linea { color: #fff; box-shadow: inset 0 0 0 1.5px var(--linea-osc); }
.boton-linea:hover { box-shadow: inset 0 0 0 1.5px #fff; }


/* 4. Cabecera y menú ------------------------------------- */
.cabecera {
  position: sticky; top: 0; z-index: 5;
  background: var(--marino); color: #fff;
  border-bottom: 1px solid var(--marino-2);
}
.cabecera .ancho {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 14px;
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 21px; text-decoration: none; }
.marca b { color: var(--naranja); }
.nav { display: flex; align-items: center; gap: 24px; font-size: 16px; font-weight: 500; color: var(--sobre-osc); }
.nav a { text-decoration: none; }
.nav a:hover { color: #fff; }
.nav .boton { padding: 11px 16px; color: #fff; }

/* Botón de menú (☰): oculto en computadora, visible en celular */
.menu-boton {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--linea-osc); border-radius: 8px; background: transparent; cursor: pointer;
}
.menu-boton span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s; }
/* Al abrir, las 3 rayas forman una X */
.menu-boton[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-boton[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-boton[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* 5. Portada --------------------------------------------- */
.portada {
  background: radial-gradient(900px 500px at 85% 20%, #16335C 0%, transparent 60%), var(--marino);
  color: #fff; padding-block: 64px 72px; overflow: hidden;
}
.portada .ancho { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.portada h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; }
.portada h1 span { color: var(--naranja); }
.portada .intro { max-width: 48ch; margin: 18px 0 28px; font-size: 18px; color: var(--sobre-osc); }
.portada .botones { display: flex; flex-wrap: wrap; gap: 12px; }
.garantias {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin: 32px 0 0; padding: 0; list-style: none;
  font-size: 14px; color: var(--sobre-osc);
}
.garantias li { display: flex; align-items: center; gap: 8px; }
.garantias svg { flex: none; color: #7FA6DA; }


/* 6. Portada: computadora y celular con capturas reales de un proyecto */
.equipos { position: relative; display: block; aspect-ratio: 5 / 4; max-width: 100%; color: inherit; text-decoration: none; }

.monitor {
  position: absolute; left: 0; top: 4%; width: 78%;
  padding: 8px; border-radius: 12px; background: #081426;
  box-shadow: 0 30px 60px -30px #000;
  transition: transform .3s;
}
.monitor .pant { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 6px; background: #1A1A1A; }

.telefono {
  position: absolute; right: 2%; bottom: 0; width: 30%;
  padding: 6px; border-radius: 22px; background: #081426;
  box-shadow: 0 30px 60px -20px #000;
  transition: transform .3s;
}
.telefono .pant { overflow: hidden; aspect-ratio: 9 / 18; border-radius: 17px; background: #1A1A1A; }

.monitor img, .telefono img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

.equipos:hover .monitor { transform: translateY(-4px); }
.equipos:hover .telefono { transform: translateY(-8px); }


/* 7. Secciones (estructura común) ------------------------ */
/* Fondos suaves (sin blanco puro): un degradado azul grisáceo y, en las secciones
   alternas, un tono un poco más oscuro con una luz azul muy tenue en la esquina */
.seccion {
  padding-block: 84px;
  background: linear-gradient(180deg, #F3F6FB 0%, var(--fondo) 100%);
}
.seccion.gris {
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(45,90,148,.10) 0%, transparent 70%),
    radial-gradient(600px 300px at 0% 100%, rgba(233,118,43,.06) 0%, transparent 70%),
    var(--fondo-2);
}
.cabeza { max-width: 640px; margin-bottom: 40px; }
.cabeza.sin-margen { margin-bottom: 0; }
h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -.015em; }
.cabeza p { margin: 14px 0 0; font-size: 19px; color: var(--gris); }
.antetitulo {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
.antetitulo::before { content: ""; width: 24px; height: 2px; background: currentColor; }


/* 8. Quiénes somos --------------------------------------- */
.nosotros { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.historia h2 { margin-bottom: 18px; }
.historia p { max-width: 60ch; margin: 0 0 16px; font-size: 18px; color: var(--gris); }
.historia .lead { font-size: 22px; font-weight: 500; line-height: 1.5; color: var(--tinta); }
.cita {
  max-width: 52ch; margin: 24px 0 0 !important; padding: 4px 0 4px 18px;
  border-left: 3px solid var(--naranja);
  font-weight: 600; color: var(--tinta) !important;
}
.pilares {
  display: grid; gap: 4px; padding: 28px;
  border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco);
  box-shadow: 0 20px 40px -30px rgba(10,27,51,.35);
}
.pilar { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--linea); }
.pilar:nth-last-child(2) { border-bottom: 0; }
.pilar h3 { font-size: 20px; font-weight: 700; }
.pilar p { margin: 4px 0 0; font-size: 16px; color: var(--gris); }
.pilares .boton { margin-top: 12px; }

/* ícono en cuadrado (se usa en Quiénes somos y Servicios) */
.ic {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 10px; background: var(--azul-suave); color: var(--azul);
}


/* 9. Servicios (tarjetas + ventana modal) ---------------- */
/* Sección con fondo degradado azul rey → índigo, con luces naranja y celeste */
.seccion.oscuro {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(520px 380px at 0% 0%, rgba(233,118,43,.32) 0%, transparent 70%),
    radial-gradient(620px 460px at 100% 100%, rgba(56,189,248,.28) 0%, transparent 70%),
    linear-gradient(135deg, #0B2A63 0%, #1B45A0 50%, #2B2F86 100%);
}
/* puntitos decorativos muy suaves */
.seccion.oscuro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
          mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.seccion.oscuro .ancho { position: relative; }
.oscuro .cabeza p { color: #D2DDF2; }
.oscuro .antetitulo { color: #FFB27D; }

.servicios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tarjeta-servicio {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 24px 22px; text-align: left; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: rgba(255,255,255,.07); color: #fff; font-family: var(--fuente);
  backdrop-filter: blur(6px);
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.tarjeta-servicio:hover {
  transform: translateY(-4px); border-color: rgba(255,178,125,.7); background: rgba(255,255,255,.12);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.5);
}
.tarjeta-servicio .ic { width: 52px; height: 52px; background: rgba(255,255,255,.14); color: #fff; }
.tarjeta-servicio h3 { font-size: 20px; font-weight: 700; }
.tarjeta-servicio .ver { margin-top: auto; font-size: 14px; font-weight: 600; color: #FFB27D; }
.tarjeta-servicio .ver::after { content: " →"; }

/* Ventana modal */
.modal {
  width: min(580px, calc(100% - 32px)); max-height: calc(100% - 48px);
  padding: 0; border: 0; border-radius: 16px; color: var(--tinta);
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.5);
}
.modal::backdrop { background: rgba(7,20,42,.7); backdrop-filter: blur(3px); }
.modal[open] { animation: aparecer .2s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.modal-cabeza {
  display: grid; grid-template-columns: 52px 1fr 40px; gap: 14px; align-items: center;
  padding: 22px 24px; background: var(--marino); color: #fff;
}
.modal-cabeza .ic { width: 52px; height: 52px; background: rgba(143,176,221,.16); color: #A9C4EA; }
.modal-cabeza h3 { font-size: 24px; font-weight: 800; }
.modal-cerrar {
  width: 40px; height: 40px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; font-size: 26px; line-height: 1;
}
.modal-cerrar:hover { background: rgba(255,255,255,.16); }
.modal-cuerpo { padding: 22px 24px 8px; }
.modal-cuerpo > p { margin: 0 0 18px; font-size: 18px; }
.modal h4 { margin: 0 0 10px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.m-incluye { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.m-incluye li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; }
.m-incluye li::before { content: "✓"; color: var(--azul); font-weight: 800; }
.m-porque { padding: 16px 18px; border-left: 3px solid var(--naranja); border-radius: 8px; background: var(--claro); }
.m-porque h4 { color: var(--tinta); }
.m-porque p { margin: 0; font-size: 16px; color: var(--gris); }
.modal-pie { padding: 18px 24px 24px; }
.modal-pie .boton { width: 100%; }


/* 10. Para tu rubro (pestañas) --------------------------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.pestanas button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 12px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--blanco); color: var(--tinta); font: 600 16px var(--fuente); cursor: pointer;
}
.pestanas button svg { width: 22px; height: 22px; color: var(--azul); }
.pestanas button:hover { border-color: var(--azul); }
.pestanas button[aria-selected="true"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.pestanas button[aria-selected="true"] svg { color: #A9C4EA; }
.rubro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 32px;
  border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco);
}
.rubro-icono {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px;
  border-radius: 16px; background: var(--azul-suave); color: var(--azul);
}
.rubro-icono svg { width: 34px; height: 34px; }
.rubro h3 { margin-bottom: 10px; font-size: 26px; font-weight: 800; }
.rubro p { margin: 0; font-size: 17px; color: var(--gris); }
.rubro h4 { margin: 0 0 12px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.rubro ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.rubro ol li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.rubro ol li span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--marino); color: #fff; font-size: 13px; font-weight: 800;
}
.rubro ol b { display: block; }
.rubro ol b { font-size: 18px; }
.rubro ol small { font-size: 16px; color: var(--gris); }


/* 10b. Proyectos (galería + visor de fotos) -------------- */
.proyectos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.proyecto {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 14px; background: var(--blanco);
  color: var(--tinta); font-family: var(--fuente);
  transition: transform .2s, box-shadow .2s;
}
.proyecto:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(10,27,51,.45); }
.proyecto-foto { position: relative; aspect-ratio: 16 / 10; background: var(--claro); }
.proyecto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proyecto-cantidad {
  position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(10,27,51,.75); color: #fff; font-size: 13px; font-weight: 600;
}
.proyecto-ejemplo {
  position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 6px;
  background: var(--naranja); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.proyecto-info { display: grid; gap: 6px; padding: 18px 20px 20px; }
.proyecto-info small { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul); }
.proyecto-info h3 { font-size: 20px; font-weight: 700; }
.proyecto-info p { margin: 0; font-size: 15px; color: var(--gris); }

/* Si hay un solo proyecto, la tarjeta ocupa todo el ancho: foto a la izquierda, texto a la derecha */
@media (min-width: 821px) {
  .proyecto:only-child { grid-column: 1 / -1; flex-direction: row; }
  .proyecto:only-child .proyecto-foto { flex: 0 0 58%; }
  .proyecto:only-child .proyecto-info { align-content: center; gap: 10px; padding: 32px 36px; }
  .proyecto:only-child .proyecto-info h3 { font-size: 28px; }
  .proyecto:only-child .proyecto-info p { font-size: 16px; }
}

/* Visor de fotos dentro del modal */
.modal-proyecto { width: min(880px, calc(100% - 32px)); }
.modal-proyecto .modal-cabeza { grid-template-columns: 1fr 40px; }
.p-tipo { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFB27D; }
.p-visor { position: relative; background: #0A1426; aspect-ratio: 16 / 10; }
.p-visor img { width: 100%; height: 100%; object-fit: contain; display: block; }
.p-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--marino); font-size: 28px; line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.p-anterior { left: 12px; }
.p-siguiente { right: 12px; }
.p-miniaturas { display: flex; gap: 8px; padding: 12px 24px 0; overflow-x: auto; }
.p-miniaturas button {
  flex: none; width: 84px; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px; background: var(--claro); opacity: .6;
}
.p-miniaturas button[aria-current="true"] { border-color: var(--naranja); opacity: 1; }
.p-miniaturas img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; }
.p-etiquetas li { padding: 4px 10px; border-radius: 6px; background: var(--azul-suave); color: var(--azul); font-size: 13px; font-weight: 600; }


/* 11. Cómo trabajamos ------------------------------------ */
.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.paso { padding-top: 18px; border-top: 3px solid var(--marino); }
.paso small { font-size: 13px; font-weight: 700; color: var(--azul); }
.paso h3 { margin: 4px 0 8px; font-size: 21px; font-weight: 700; }
.paso p { margin: 0; font-size: 17px; color: var(--gris); }


/* 12. Por qué alzavuelo ---------------------------------- */
.motivos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.motivo { padding-left: 18px; border-left: 2px solid var(--linea); }
.motivo h3 { margin-bottom: 6px; font-size: 21px; font-weight: 700; }
.motivo p { margin: 0; color: var(--gris); }


/* 13. Preguntas frecuentes ------------------------------- */
.preguntas { display: grid; gap: 10px; max-width: 820px; }
.preguntas details { padding: 0 22px; border: 1px solid var(--linea); border-radius: 12px; background: var(--blanco); }
.preguntas summary {
  position: relative; padding: 20px 40px 20px 0;
  font-size: 19px; font-weight: 700; list-style: none; cursor: pointer;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; position: absolute; right: 0; top: 16px;
  font-size: 24px; font-weight: 500; color: var(--azul);
}
.preguntas details[open] summary::after { content: "−"; }
.preguntas details p { max-width: 68ch; margin: 0 0 20px; color: var(--gris); }


/* 14. Contacto ------------------------------------------- */
/* Fondo: azul marino con una luz suave y una cuadrícula muy tenue */
.contacto {
  position: relative; color: #fff;
  background:
    radial-gradient(700px 400px at 10% 0%, #17375F 0%, transparent 70%),
    radial-gradient(600px 400px at 100% 100%, #13305A 0%, transparent 70%),
    var(--marino);
}
.contacto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  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: 40px 40px;
}
.contacto .ancho { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.contacto .cabeza p { color: var(--sobre-osc); }
.contacto .antetitulo { color: #8FB0DD; }
.datos { display: grid; gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.datos li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--linea-osc); }
.datos span { font-size: 14px; color: var(--sobre-osc); }
.datos a, .datos b { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.datos a:hover { text-decoration: underline; }

/* Redes sociales (se usan en Contacto y en el pie de página) */
.siguenos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.siguenos span { font-size: 15px; color: var(--sobre-osc); }
.siguenos b { color: #fff; }
.redes { display: flex; gap: 10px; }
.redes a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #fff;
  transition: background .15s, border-color .15s, transform .15s;
}
.redes a:hover { background: var(--naranja); border-color: var(--naranja); transform: translateY(-2px); }

.formulario {
  padding: 28px; border-radius: 14px; background: var(--blanco); color: var(--tinta);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
}
.formulario h3 { margin-bottom: 4px; font-size: 22px; font-weight: 800; }
.formulario > p { margin: 0 0 18px; font-size: 16px; color: var(--gris); }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario .campo { display: grid; gap: 6px; margin-bottom: 16px; font-size: 15px; font-weight: 600; }
.formulario input[type=text] {
  width: 100%; padding: 12px 13px; border: 1px solid var(--linea); border-radius: 8px;
  background: #fff; color: var(--tinta); font: 500 16px var(--fuente);
}
.formulario input[type=text]:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.etiqueta-campo { font-size: 15px; font-weight: 600; }

/* Opciones como "chips" que se marcan */
.marcas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.marcas label {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px;
  border: 1px solid var(--linea); border-radius: 999px;
  font-size: 14px; font-weight: 500; cursor: pointer; user-select: none;
}
.marcas label:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); color: var(--azul); font-weight: 600; }
.marcas input { width: 15px; height: 15px; margin: 0; accent-color: var(--azul); }
.formulario .boton { width: 100%; }
.formulario .nota { margin: 12px 0 0; font-size: 12px; color: var(--gris); text-align: center; }


/* 15. Pie de página -------------------------------------- */
.pie { background: #07142A; color: var(--sobre-osc); font-size: 15px; }
.pie-columnas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-block: 40px 28px; }
.pie .marca { color: #fff; font-size: 19px; }
.pie-marca p { margin: 10px 0 16px; max-width: 32ch; }
.pie .redes a { width: 40px; height: 40px; }
.pie-enlaces, .pie-contacto { display: grid; gap: 8px; align-content: start; }
.pie a { text-decoration: none; }
.pie-enlaces a:hover, .pie-contacto a:hover { color: #fff; }
.pie-final {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-block: 18px; border-top: 1px solid var(--marino-2); font-size: 13px;
}


/* Botón flotante de WhatsApp (abajo a la derecha, siempre visible) */
.whatsapp-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 20;
  width: 58px; height: 58px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 6px 18px rgba(10, 27, 51, .3);
  transition: transform .2s;
}
.whatsapp-flotante[hidden] { display: none; }
.whatsapp-flotante:hover { transform: scale(1.08); }
@media (max-width: 600px) { .whatsapp-flotante { right: 16px; bottom: 16px; width: 54px; height: 54px; } }


/* 16. Celular y tablet (de pantalla grande a pequeña) ---- */
@media (max-width: 900px) {
  .portada .ancho { grid-template-columns: 1fr; }
  .equipos { max-width: 520px; }
  .nosotros { grid-template-columns: 1fr; gap: 36px; }
  .contacto .ancho { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  /* Menú del celular: se despliega debajo de la cabecera */
  .cabecera .ancho { position: relative; }
  .menu-boton { display: flex; }
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 20px 20px; background: var(--marino);
    border-bottom: 1px solid var(--marino-2);
    box-shadow: 0 20px 30px -20px #000;
  }
  .nav.abierto { display: flex; }
  .nav a { padding: 14px 4px; border-bottom: 1px solid var(--marino-2); font-size: 17px; }
  .nav .boton { margin-top: 16px; border-bottom: 0; }
  .pasos { grid-template-columns: 1fr 1fr; }
  .servicios { grid-template-columns: repeat(2, 1fr); }
  .proyectos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .motivos { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 760px) {
  .rubro { grid-template-columns: 1fr; gap: 24px; padding: 22px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .seccion { padding-block: 56px; }
  .cabeza p { font-size: 17px; }
  .historia p { font-size: 17px; }
  .historia .lead { font-size: 19px; }

  /* Servicios: 2 tarjetas por fila, más compactas */
  .servicios { gap: 10px; }
  .tarjeta-servicio { gap: 10px; padding: 16px 14px; }
  .tarjeta-servicio .ic { width: 44px; height: 44px; }
  .tarjeta-servicio h3 { font-size: 16px; }
  .tarjeta-servicio .ver { font-size: 13px; }

  /* Modal en celular */
  .modal { width: calc(100% - 24px); max-height: calc(100% - 32px); }
  .modal-cabeza { grid-template-columns: 44px 1fr 40px; padding: 16px 18px; gap: 12px; }
  .modal-cabeza .ic { width: 44px; height: 44px; }
  .modal-cabeza h3 { font-size: 20px; }
  .modal-cuerpo { padding: 18px 18px 4px; }
  .modal-cuerpo > p { font-size: 16px; }
  .m-incluye { grid-template-columns: 1fr; }
  .modal-pie { padding: 16px 18px 18px; }

  /* Proyectos: una tarjeta por fila */
  .proyectos { grid-template-columns: 1fr; gap: 16px; }
  .p-flecha { width: 36px; height: 36px; font-size: 24px; }
  .p-miniaturas { padding: 10px 18px 0; }
  .p-miniaturas button { width: 64px; }

  /* Rubros: pestañas deslizables en una sola fila */
  .pestanas { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: -16px; padding-inline: 16px; }
  .pestanas button { flex: none; font-size: 15px; }
  .rubro h3 { font-size: 22px; }
  .rubro-icono { width: 56px; height: 56px; }
  .ancho { padding-left: 16px; padding-right: 16px; }
  .portada { padding-block: 40px 48px; }
  .portada .intro { font-size: 16px; }
  .portada .botones .boton { flex: 1 1 auto; }
  .historia .lead { font-size: 18px; }
  .pilares { padding: 18px 20px; }
  .pasos { grid-template-columns: 1fr; gap: 20px; }

  /* Formulario más compacto en celular */
  .formulario { padding: 20px 18px; }
  .formulario h3 { font-size: 18px; }
  .formulario > p { font-size: 14px; margin-bottom: 14px; }
  .fila-campos { grid-template-columns: 1fr; gap: 0; }
  .formulario .campo { margin-bottom: 12px; }
  .marcas { gap: 8px; }
  /* Chips más altas (unos 40 px) para tocarlas fácil con el dedo */
  .marcas label { min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .marcas input { width: 18px; height: 18px; }
  .datos { margin-top: 20px; gap: 10px; }
  .datos li { grid-template-columns: 90px 1fr; padding-top: 10px; font-size: 15px; }

  /* Pie de página compacto */
  .pie-columnas { grid-template-columns: 1fr 1fr; gap: 20px; padding-block: 28px 18px; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-final { padding-block: 14px; font-size: 12px; }
}