/* ════════════════════════════════════════════════════════════════
   ÍNDICE
   ════════════════════════════════════════════════════════════════
   1.  Variables
   2.  Reset / Base
   3.  Nav
   4.  Hero
   5.  Nuestros Servicios
   6.  Servicios (bloque legacy, sin uso en el HTML actual)
   7.  Tipos
   8.  Servicios extendido (bloque legacy, sin uso en el HTML actual)
   9.  Urgencia (bloque legacy, sin uso en el HTML actual)
   10. Nosotros (bloque legacy, sin uso en el HTML actual)
   11. Zona (bloque legacy, sin uso en el HTML actual)
   12. CTA Final (bloque legacy, sin uso en el HTML actual)
   13. Contacto — definición base (sobreescrita por el bloque 15)
   14. Footer — definición base (sobreescrita por el bloque 16)
   15. Contacto — definición final (la que se aplica)
   16. Footer — definición final (la que se aplica)
   17. Tweaks Panel
   18. WhatsApp Float
   19. Animaciones
   20. Responsive

   NOTA: el orden de las reglas se mantiene idéntico al original.
   Hay selectores duplicados (.servicios, .serv-grid, .serv-card,
   .cont-wrap, footer, .foot-grid) donde el bloque que aparece más
   abajo sobreescribe propiedades del bloque anterior. Reordenarlos
   cambiaría el resultado visual, por eso se dejaron en su lugar y
   solo se documentan con comentarios.
   ════════════════════════════════════════════════════════════════ */

/* ═══════════ 1. VARIABLES ═══════════ */
/* Paleta de acento, radios de borde, pesos tipográficos y overlays del hero (editables desde el panel de tweaks) */
:root {
  --accent: #f9880c;
  --accent-h: #ffaa44;
  --accent-rgb: 249, 136, 12;
  --radius-card: 14px;
  --radius-btn: 5px;
  --radius-pill: 50px;
  --shadow-strength: 1;
  --font-heavy: 900;
  --font-bold: 800;
  --hero-overlay-a: 0.55;
  --hero-overlay-b: 0.3;
}

/* ═══════════ 2. RESET / BASE ═══════════ */
/* Reset universal de márgenes, padding y box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Scroll suave al navegar por anclas (#sobre, #tipos, etc.) */
html {
  scroll-behavior: smooth;
}
/* Tipografía y colores base del body */
body {
  font-family: "Inter", sans-serif;
  background: #f4f6f9;
  color: #05224b;
  overflow-x: hidden;
}
/* Fuerza la fuente Inter también en los controles de formulario */
body,
input,
textarea,
select,
button {
  font-family:
    "Inter",
    "Inter Fallback",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;
}
/* Imágenes en bloque y responsive por defecto */
img {
  display: block;
  max-width: 100%;
}
/* Los links heredan el color del texto */
a {
  color: inherit;
}

/* ═══════════ 3. NAV ═══════════ */
/* Barra de navegación fija con fondo semitransparente y blur */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 4rem;
  background: rgba(5, 34, 75, 0.5);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.3s;
}
/* Estado de la nav al hacer scroll (fondo más opaco) */
nav.scrolled {
  background: rgba(5, 34, 75, 0.96);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
/* Logo contenedor */
.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

/* Logo imagen */
#logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  margin-top: -11px;
}

/* Nombre al lado del logo */
.logo-brand-name {
  font-weight: 800;
  font-size: 1rem;
  color: white;
  letter-spacing: -0.2px;
  line-height: 1;
}
.logo-brand-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: white;
  letter-spacing: -0.2px;
}
.logo-brand-sub {
  font-size: 0.55rem;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* Lista de links de navegación (oculta en mobile) */
.nav-links {
  display: flex;
  gap: 2.2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--accent);
}
/* Botón CTA de la nav ("Presupuestar") */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #05224b;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-btn);
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s;
}
.nav-cta:hover {
  background: var(--accent-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.4);
}
/* Botón hamburguesa, oculto en desktop */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  color: white;
  cursor: pointer;
}

/* ═══════════ 4. HERO ═══════════ */
/* Sección hero a pantalla completa */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Imagen de fondo con zoom lento animado */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../assets/bg-porton.png") center center/cover no-repeat;
  transform: scale(1.05);
  animation: slowZoom 18s ease-in-out infinite alternate;
}
/* Degradado oscuro sobre la imagen para legibilidad del texto */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(3, 21, 48, calc(var(--hero-overlay-a) + 0.3)) 0%,
    rgba(5, 34, 75, var(--hero-overlay-a)) 40%,
    rgba(5, 34, 75, var(--hero-overlay-b)) 70%,
    rgba(3, 21, 48, calc(var(--hero-overlay-a) + 0.05)) 100%
  );
}
/* Viñeta radial adicional en los bordes */
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 100% at 50% 50%,
    transparent 40%,
    rgba(3, 21, 48, 0.6) 100%
  );
}
/* Línea de acento en el borde inferior del hero */
.hero-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent) 30%,
    var(--accent) 70%,
    transparent
  );
  opacity: 0.7;
}
/* Grilla del contenido: texto a la izquierda, stats a la derecha */
.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 0 4rem;
  padding-top: 5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
.hero-left {
  max-width: 720px;
}

/* Badge superior con punto animado */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 50px;
  padding: 0.35rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.5s 0.1s forwards;
}
.hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.5s infinite;
}
/* Título principal */
.hero h1 {
  font-weight: var(--font-heavy);
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -2px;
  color: white;
  margin-bottom: 0.3rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.2s forwards;
  white-space: nowrap;
}
/* Línea de acento debajo del título */
.hero-accent {
  display: block;
  color: var(--accent);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 1.3rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.3s forwards;
}
/* Párrafo de descripción */
.hero-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
  max-width: 500px;
  margin-bottom: 2.3rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.4s forwards;
}
.hero-desc strong {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
/* Contenedor de los botones de acción */
.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.5s forwards;
}
/* Botón primario (naranja, sólido) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--accent);
  color: #05224b;
  padding: 0.9rem 1.9rem;
  border-radius: var(--radius-btn);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s;
  box-shadow: 0 8px 26px rgba(var(--accent-rgb), 0.4);
}
.btn-primary:hover {
  background: var(--accent-h);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(var(--accent-rgb), 0.55);
}
.btn-primary svg {
  width: 19px;
  height: 19px;
  fill: #05224b;
}
/* Botón secundario (outline transparente) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.07);
  color: white;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-btn);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(-3px);
}
/* Línea de WhatsApp debajo de los botones */
.hero-wa {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.83rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.6s forwards;
}
.hero-wa svg {
  width: 17px;
  height: 17px;
  fill: #25d366;
}
.hero-wa span {
  color: #25d366;
  font-weight: 600;
}
/* Columna de tarjetas de estadísticas */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  animation: fadeIn 0.8s 0.6s forwards;
  flex-shrink: 0;
}
/* Tarjeta individual de estadística */
.stat-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1.1rem 1.4rem;
  min-width: 170px;
  transition: all 0.3s;
}
.stat-card:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateX(-4px);
}
.stat-num {
  font-weight: 900;
  font-size: 1.9rem;
  color: white;
  letter-spacing: -1.5px;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-num em {
  color: var(--accent);
  font-style: normal;
}
.stat-sep {
  width: 22px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 0.35rem;
}
.stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
/* Indicador de scroll al pie del hero */
.scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  opacity: 0;
  animation: fadeIn 0.8s 1.2s forwards;
}
.scroll-hint span {
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
}
.scroll-dot {
  width: 3px;
  height: 5px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 2px;
  animation: scrollDot 1.8s ease-in-out infinite;
}

/* ═══════════ 5. NUESTROS SERVICIOS ═══════════ */
/* Contenedor general de la sección */
.s2 {
  background: #f4f6f9;
}
/* Contenedor con ancho máximo y padding */
.sobre {
  padding: 6rem 4rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* Encabezado centrado con título y descripción */
.sobre-header {
  text-align: center;
  margin-bottom: 3.2rem;
}
.sobre-label {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 50px;
  padding: 0.4rem 1.1rem;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.sobre-header h2 {
  font-weight: var(--font-heavy);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -2px;
  color: #05224b;
  line-height: 1;
  margin-bottom: 0.8rem;
}
.sobre-header h2 em {
  font-style: normal;
  color: var(--accent);
}
.sobre-header p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5568;
  max-width: 540px;
  margin: 0 auto;
}

/* Grilla de 2 columnas: imagen a la izquierda, tarjetas a la derecha */
.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
}
/* Contenedor de la imagen con bordes redondeados */
.sobre-img-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  min-height: 420px;
}
.sobre-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Badge flotante sobre la imagen (ej: años de experiencia) */
.sobre-img-badge {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  background: var(--accent);
  color: #05224b;
  border-radius: 10px;
  padding: 0.9rem 1.3rem;
  box-shadow: 0 12px 30px -8px rgba(var(--accent-rgb), 0.5);
}
.sobre-img-badge .badge-num {
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -1px;
}
.sobre-img-badge .badge-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
  line-height: 1.2;
}

/* Grilla 2x2 de tarjetas de servicio */
.sobre-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Cada tarjeta individual de servicio */
.sobre-card {
  background: white;
  border-radius: var(--radius-card);
  padding: 1.5rem 1.4rem;
  border: 1px solid rgba(5, 34, 75, 0.07);
  box-shadow: 0 6px 20px -10px rgba(5, 34, 75, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    border-color 0.3s,
    opacity 0.7s,
    transform 0.7s;
}
.sobre-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px -12px rgba(5, 34, 75, 0.2);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.sobre-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.sobre-card-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 2;
}
.sobre-card h4 {
  font-weight: 800;
  font-size: 0.94rem;
  color: #05224b;
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.sobre-card p {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #7a8aa3;
}

/* ═══════════ 6. SERVICIOS (legacy, sin uso en el HTML actual) ═══════════ */
/* Contenedor y encabezado de la sección */
.servicios {
  background: #f4f6f9;
  padding: 6rem 4rem;
}
.servicios-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.2rem;
}
.servicios-label {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 50px;
  padding: 0.4rem 1.1rem;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.servicios-header h2 {
  font-weight: var(--font-heavy);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  letter-spacing: -1.4px;
  color: #05224b;
  line-height: 1.15;
  margin-bottom: 0.8rem;
}
.servicios-header h2 em {
  font-style: normal;
  color: var(--accent);
}
.servicios-header p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5568;
}

/* Grilla de tarjetas de servicio (3 columnas) */
.serv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  max-width: 1200px;
  margin: 0 auto;
}
/* Tarjeta de servicio con imagen */
.serv-card {
  background: white;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px -14px rgba(5, 34, 75, 0.16);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.serv-card.on {
  opacity: 1;
  transform: translateY(0);
}
.serv-card-img {
  position: relative;
  height: 220px;
  overflow: hidden;
}
.serv-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.serv-card-tag {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  background: var(--accent);
  color: #05224b;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
}
.serv-card-body {
  padding: 1.5rem 1.4rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}
.serv-card-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.serv-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.serv-card-icon svg {
  width: 21px;
  height: 21px;
}
.serv-card-top h3 {
  font-weight: 800;
  font-size: 1.05rem;
  color: #05224b;
  letter-spacing: -0.3px;
}
.serv-card-body > p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #4a5568;
  flex: 1;
}
.serv-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.serv-card-cta svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.serv-card-cta:hover svg {
  transform: translateX(3px);
}

/* ═══════════ 7. TIPOS ═══════════ */
/* Sección de tipos de portones instalados */
.tipos {
  background: #f4f6f9;
  padding: 5rem 4rem 6rem;
  position: relative;
  overflow: hidden;
}
/* Resplandor decorativo de fondo */
.tipos-glow {
  position: absolute;
  top: -10%;
  right: -5%;
  width: 50vw;
  height: 120%;
  background: radial-gradient(
    ellipse,
    rgba(var(--accent-rgb), 0.06) 0%,
    transparent 65%
  );
  pointer-events: none;
}
/* Encabezado centrado de la sección */
.tipos-head {
  max-width: 1100px;
  margin: 0 auto 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  position: relative;
  z-index: 1;
}
.tipos-title {
  font-weight: var(--font-heavy);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -2px;
  color: #05224b;
  line-height: 1;
}
.tipos-sub {
  margin-top: 0.4rem;
  color: #4a5568;
  font-size: 0.92rem;
  max-width: 560px;
  line-height: 1.55;
}
/* Grilla de tarjetas de tipos de portón (3 columnas) */
.tipos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* Tarjeta de tipo de portón: imagen con hover + info debajo */
.tipo-card {
  background: white;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid rgba(5, 34, 75, 0.07);
  transition: all 0.35s;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 38px -20px rgba(5, 34, 75, 0.18);
}
.tipo-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 30px 60px -22px rgba(5, 34, 75, 0.25),
    0 0 0 1px rgba(var(--accent-rgb), 0.2);
}
.tipo-img {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: #0d2444;
}
.tipo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.tipo-card:hover .tipo-img img {
  transform: scale(1.08);
}
/* Overlay de "Ver detalle" que aparece al pasar el mouse */
.tipo-hover {
  position: absolute;
  inset: 0;
  background: rgba(5, 34, 75, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(2px);
}
.tipo-card:hover .tipo-hover {
  opacity: 1;
}
.tipo-hover-btn {
  background: rgba(255, 255, 255, 0.95);
  color: #05224b;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 50px;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  transform: translateY(10px);
  transition: transform 0.35s;
}
.tipo-card:hover .tipo-hover-btn {
  transform: translateY(0);
}
.tipo-hover-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}
/* Info textual debajo de la imagen (nombre, descripción, CTA) */
.tipo-body {
  padding: 1.5rem 1.6rem 1.8rem;
}
.tipo-meta {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.tipo-nombre {
  font-weight: 800;
  font-size: 1.35rem;
  color: #05224b;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin-bottom: 0.5rem;
  transition: color 0.25s;
}
.tipo-card:hover .tipo-nombre {
  color: var(--accent);
}
.tipo-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #6b7a93;
  margin-bottom: 1rem;
}
.tipo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1.5px solid var(--accent);
  padding: 0.5rem 1.1rem;
  border-radius: 50px;
  transition: all 0.25s;
}

.tipo-btn:hover {
  background: var(--accent);
  color: #05224b;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
}

/* Mapa embebido dentro de la sección de contacto */
.cont-mapa {
  margin-top: 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cont-mapa iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ═══════════ 8. SERVICIOS EXTENDIDO (legacy, sin uso en el HTML actual) ═══════════ */
/* Contenedor y encabezado de la sección */
.servicios-wrap {
  background: #f4f6f9;
  padding: 5rem 4rem;
}
.servicios {
  max-width: 1200px;
  margin: 0 auto;
}
.servicios-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.servicios-head .tlabel {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 4px;
  padding: 0.25rem 0.8rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.servicios-head h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -1.2px;
  color: #05224b;
  line-height: 1.08;
}
.servicios-head h2 em {
  font-style: normal;
  color: var(--accent);
}
.servicios-head p {
  margin-top: 0.9rem;
  color: #4a5568;
  font-size: 0.97rem;
}
/* Grilla de tarjetas de servicio detalladas (2 columnas) */
.serv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
/* Tarjeta de servicio con lista de ítems y CTA propio */
.serv-card {
  background: white;
  border: 1px solid rgba(5, 34, 75, 0.07);
  border-radius: var(--radius-card);
  padding: 2rem;
  transition: all 0.35s;
  position: relative;
  overflow: hidden;
}
.serv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 0;
  background: var(--accent);
  transition: height 0.35s;
}
.serv-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 20px 50px -20px rgba(5, 34, 75, 0.18);
}
.serv-card:hover::before {
  height: 100%;
}
.serv-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
}
.serv-card h3 {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.7px;
  color: #05224b;
  margin-bottom: 0.6rem;
}
.serv-card > p {
  color: #4a5568;
  line-height: 1.65;
  font-size: 0.93rem;
  margin-bottom: 1.3rem;
}
/* Lista de ítems con check ilustrado (SVG en base64) */
.serv-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}
.serv-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: #2c3e50;
  font-size: 0.88rem;
  line-height: 1.5;
}
.serv-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 0.3rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305224b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 9px;
  background-repeat: no-repeat;
  background-position: center;
}
.serv-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--accent);
  color: #05224b;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-btn);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s;
}
.serv-cta:hover {
  background: var(--accent-h);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.35);
}
.serv-cta svg {
  width: 16px;
  height: 16px;
  fill: #05224b;
}

/* Grilla de mini-tarjetas de servicios adicionales (3 columnas) */
.serv-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.serv-mini-card {
  background: white;
  border: 1px solid rgba(5, 34, 75, 0.07);
  border-radius: 12px;
  padding: 1.4rem;
  transition: all 0.3s;
}
.serv-mini-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: 0 14px 32px -14px rgba(5, 34, 75, 0.15);
}
.serv-mini-card .row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.serv-mini-card .ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: rgba(5, 34, 75, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.serv-mini-card h4 {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.3px;
  color: #05224b;
}
.serv-mini-card p {
  color: #4a5568;
  font-size: 0.83rem;
  line-height: 1.55;
}

/* ═══════════ 9. URGENCIA (legacy, sin uso en el HTML actual) ═══════════ */
/* Bloque de llamado a la acción urgente */
.urg-wrap {
  background: #031530;
  padding: 4rem 4rem;
}
.urg {
  max-width: 1000px;
  margin: 0 auto;
  background: linear-gradient(140deg, #0d2444 0%, #031530 100%);
  border: 2px solid rgba(var(--accent-rgb), 0.55);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.urg::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -15%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.12);
  filter: blur(60px);
}
/* Badge de "urgente" con punto animado */
.urg-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--accent-rgb), 0.18);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--accent);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 1.2rem;
}
.urg-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: blink 1.5s infinite;
}
.urg h2 {
  position: relative;
  font-weight: var(--font-heavy);
  font-size: clamp(2rem, 3.5vw, 3rem);
  letter-spacing: -1.5px;
  line-height: 1.05;
  color: white;
  margin-bottom: 1rem;
}
.urg h2 em {
  font-style: normal;
  color: var(--accent);
}
.urg p {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 2rem;
}
.urg-btns {
  position: relative;
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.urg .btn-ghost {
  color: white;
}

/* ═══════════ 10. NOSOTROS (legacy, sin uso en el HTML actual) ═══════════ */
/* Sección "Nosotros": imagen a un lado y texto institucional al otro */
.nos-wrap {
  background: #f4f6f9;
  padding: 5rem 4rem;
}
.nos {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.nos-img-wrap {
  position: relative;
}
/* Imagen con marco blanco y badge flotante de años/experiencia */
.nos-img {
  position: relative;
  border-radius: calc(var(--radius-card) + 4px);
  overflow: hidden;
  border: 4px solid white;
  box-shadow: 0 30px 60px -20px rgba(5, 34, 75, 0.25);
}
.nos-img img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.nos-img-badge {
  position: absolute;
  bottom: -1.2rem;
  right: -1.2rem;
  background: #05224b;
  color: white;
  border-radius: var(--radius-card);
  padding: 1rem 1.3rem;
  box-shadow: 0 14px 30px rgba(5, 34, 75, 0.3);
}
.nos-img-badge .n {
  font-weight: 900;
  font-size: 1.7rem;
  color: var(--accent);
  line-height: 1;
}
.nos-img-badge .l {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.3rem;
  font-weight: 600;
}
/* Columna de texto con lista de puntos destacados */
.nos-text .tlabel {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 4px;
  padding: 0.25rem 0.8rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.nos-text h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -1.2px;
  color: #05224b;
  line-height: 1.08;
  margin-bottom: 0.9rem;
}
.nos-text > p {
  color: #4a5568;
  font-size: 0.97rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.nos-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.nos-list li {
  display: flex;
  gap: 1rem;
}
.nos-list .ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.13);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}
.nos-list h4 {
  font-weight: 800;
  color: #05224b;
  font-size: 1.05rem;
  letter-spacing: -0.3px;
  margin-bottom: 0.15rem;
}
.nos-list p {
  color: #4a5568;
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ═══════════ 11. ZONA (legacy, sin uso en el HTML actual) ═══════════ */
/* Sección de zona de cobertura */
.zona {
  background: #f4f6f9;
  padding: 5rem 4rem;
  text-align: center;
}
.zona-inner {
  max-width: 900px;
  margin: 0 auto;
}
.zona .tlabel {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 4px;
  padding: 0.25rem 0.8rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.zona h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -1.2px;
  color: #05224b;
  line-height: 1.1;
}
.zona h2 em {
  font-style: normal;
  color: var(--accent);
}
.zona p {
  color: #4a5568;
  font-size: 0.97rem;
  margin-top: 0.9rem;
}
/* Chips de localidades cubiertas */
.zona-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.3rem;
}
.zona-chip {
  background: white;
  border: 2px solid rgba(5, 34, 75, 0.1);
  color: #05224b;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1.1rem;
  border-radius: 50px;
  transition: all 0.25s;
  cursor: default;
}
.zona-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #05224b;
  transform: translateY(-2px);
}

/* ═══════════ 12. CTA FINAL (legacy, sin uso en el HTML actual) ═══════════ */
/* Bloque final de llamado a la acción con partículas animadas */
.cta-final {
  position: relative;
  padding: 6rem 4rem;
  text-align: center;
  color: white;
  background: linear-gradient(135deg, #05224b 0%, #031530 100%);
  overflow: hidden;
}
.cta-final .particle {
  position: absolute;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
  animation: floatY linear infinite;
  bottom: -20px;
}
.cta-final-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}
.cta-final h2 {
  font-weight: var(--font-heavy);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  letter-spacing: -2px;
  line-height: 1.05;
  margin-bottom: 1.2rem;
}
.cta-final h2 em {
  font-style: normal;
  color: var(--accent);
}
.cta-final p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 2.2rem;
}

/* ═══════════ 13. CONTACTO — base (sobreescrita por el bloque 15) ═══════════ */
/* Contenedor de la sección de contacto */
.cont-wrap {
  background: #f4f6f9;
  padding: 5rem 4rem;
}
.cont {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.cont-l .tlabel {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.25);
  border-radius: 4px;
  padding: 0.25rem 0.8rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.cont-l h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  letter-spacing: -1.2px;
  color: white;
  line-height: 1.08;
}
.cont-l > p {
  color: #4a5568;
  font-size: 0.97rem;
  margin-top: 0.9rem;
  line-height: 1.65;
}
/* Lista de datos de contacto (WhatsApp, dirección, horario) */
.cont-info {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.cont-info-row {
  display: flex;
  gap: 1rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.cont-info-row .ico {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.cont-info-row .ico svg {
  width: 22px;
  height: 22px;
}
.cont-info-row .t {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7a8aa3;
}
.cont-info-row .v {
  font-weight: 800;
  color: #05224b;
  font-size: 1.05rem;
  letter-spacing: -0.2px;
}
.cont-direct {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #05224b;
  color: white;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-btn);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 2rem;
  transition: all 0.25s;
}
.cont-direct:hover {
  background: #0d2444;
  transform: translateY(-2px);
}
.cont-direct svg {
  width: 18px;
  height: 18px;
  fill: #25d366;
}

/* Formulario de contacto */
.cont-form {
  background: white;
  border-radius: calc(var(--radius-card) + 4px);
  padding: 2rem 2.2rem;
  border: 1px solid rgba(5, 34, 75, 0.07);
  box-shadow: 0 16px 40px -16px rgba(5, 34, 75, 0.18);
}
.cont-form h3 {
  font-weight: 800;
  color: #05224b;
  font-size: 1.25rem;
  letter-spacing: -0.4px;
}
.cont-form > p {
  color: #4a5568;
  font-size: 0.88rem;
  margin-top: 0.25rem;
  margin-bottom: 1.4rem;
}
.field-group {
  margin-bottom: 1rem;
}
.field-group label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #4a5568;
  margin-bottom: 0.4rem;
}
.field-group .field {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1.5px solid #d8dee8;
  background: white;
  color: #05224b;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s;
}
.field-group .field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}
.field-group textarea.field {
  resize: none;
}
.cont-form .btn-primary {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
}
.cont-note {
  margin-top: 0.7rem;
  text-align: center;
  font-size: 0.7rem;
  color: #7a8aa3;
}

/* ═══════════ 14. FOOTER — base (sobreescrita por el bloque 16) ═══════════ */
/* Footer del sitio */
footer {
  background: #031530;
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem 4rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.foot-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
}
.foot-col h4 {
  color: white;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.foot-col a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.foot-col a:hover {
  color: var(--accent);
}
.foot-brand .logo-brand-name {
  font-size: 1.1rem;
}
.foot-brand .logo-brand-sub {
  color: rgba(255, 255, 255, 0.4);
}
.foot-brand p {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 300px;
}
.foot-bottom {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

/* ═══════════ 15. CONTACTO — definición final ═══════════ */
/* Contenedor de la sección de contacto (fondo azul oscuro) */
.cont-wrap {
  background: #05224b;
  padding: 6rem 4rem 7rem;
  position: relative;
  overflow: hidden;
}
.cont-wrap::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -5%;
  width: 50vw;
  height: 120%;
  background: radial-gradient(
    ellipse,
    rgba(var(--accent-rgb), 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.cont-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
  z-index: 1;
}

/* Columna izquierda: título y tarjetas de datos de contacto */
.cont-l-label {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 50px;
  padding: 0.4rem 1.1rem;
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.cont-title {
  font-weight: var(--font-heavy);
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  letter-spacing: -2px;
  color: white;
  line-height: 1;
  margin-bottom: 2rem;
}
.cont-info-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cont-info-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: inherit;
  transition: all 0.25s;
  backdrop-filter: blur(8px);
}
.cont-info-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.06);
  transform: translateX(4px);
}
.cont-info-ico {
  width: 48px;
  height: 48px;
  border-radius: 11px;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.cont-info-ico svg {
  width: 22px;
  height: 22px;
}
.cont-info-card .t {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.2rem;
}
.cont-info-card .v {
  font-weight: 800;
  font-size: 1.05rem;
  color: white;
  letter-spacing: -0.3px;
}

/* Formulario de contacto (columna derecha) */
.cont-form {
  background: white;
  border: 1px solid rgba(5, 34, 75, 0.08);
  border-radius: calc(var(--radius-card) + 4px);
  padding: 2.2rem 2.2rem 2rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.cont-form h3 {
  font-weight: var(--font-heavy);
  font-size: 1.4rem;
  color: #05224b;
  letter-spacing: -0.5px;
  margin-bottom: 1.6rem;
}
.cont-field {
  margin-bottom: 1.1rem;
}
.cont-field label {
  display: block;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #05224b;
  margin-bottom: 0.45rem;
}
.cont-field .inp,
.cont-field select,
.cont-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1.5px solid #d8dee8;
  background: white;
  color: #05224b;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s;
}
.cont-field .inp:focus,
.cont-field select:focus,
.cont-field textarea:focus {
  outline: none;
  border-color: #05224b;
  box-shadow: 0 0 0 4px rgba(5, 34, 75, 0.12);
}
.cont-field .inp::placeholder,
.cont-field textarea::placeholder {
  color: #a4adbd;
}
.cont-field textarea {
  resize: none;
}
.cont-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--accent);
  color: #05224b;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 0.4rem;
  box-shadow: 0 14px 30px -10px rgba(var(--accent-rgb), 0.5);
}
.cont-submit:hover {
  background: var(--accent-h);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(var(--accent-rgb), 0.6);
}
.cont-submit svg {
  width: 20px;
  height: 20px;
  fill: #05224b;
}
.cont-note {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.74rem;
  color: #7a8aa3;
}

/* ═══════════ 16. FOOTER — definición final ═══════════ */
/* Footer del sitio (fondo azul oscuro, 4 columnas) */
footer {
  background: #05224b;
  color: rgba(255, 255, 255, 0.7);
  padding: 4rem 4rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.foot-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 3rem;
}
/* Columna de marca (logo + descripción) */
.foot-brand .foot-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}
.foot-brand .foot-logo-box {
  width: 38px;
  height: 38px;
  background: var(--accent);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.95rem;
  color: #05224b;
}
.foot-brand .foot-logo-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: white;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
.foot-brand .foot-logo-sub {
  font-size: 0.6rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.foot-brand p {
  font-size: 0.88rem;
  line-height: 1.65;
  max-width: 320px;
}
/* Columnas de enlaces (Navegación, Servicios, Contacto) */
.foot-col h4 {
  color: white;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.9rem;
}
.foot-col a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}
.foot-col a:hover {
  color: var(--accent);
}
.foot-col li.row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.foot-col li.row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--accent);
}
.foot-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: #05224b;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.1rem;
  border-radius: var(--radius-btn);
  text-decoration: none;
  margin-top: 0.4rem;
  transition: all 0.25s;
}
.foot-cta:hover {
  background: var(--accent-h);
  transform: translateY(-2px);
}
.foot-cta svg {
  width: 16px;
  height: 16px;
  fill: #05224b;
}
/* Línea inferior de copyright */
.foot-bottom {
  max-width: 1200px;
  margin: 3rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.7rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}
.foot-bottom .heart {
  color: var(--accent);
}

/* ═══════════ 17. TWEAKS PANEL ═══════════ */
/* Panel flotante de personalización (arrastrable, oculto por defecto) */
.tw-panel {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 300;
  width: 300px;
  background: #05224b;
  color: white;
  border-radius: 14px;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  font-family: "Inter", sans-serif;
  overflow: hidden;
  display: none;
  animation: twIn 0.25s ease-out;
}
.tw-panel.open {
  display: block;
}
@keyframes twIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Encabezado del panel (título + botón cerrar) */
.tw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: grab;
}
.tw-head.drag {
  cursor: grabbing;
}
.tw-head h4 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.tw-close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.3rem;
}
.tw-close:hover {
  color: white;
}
/* Cuerpo del panel con scroll interno */
.tw-body {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-height: 75vh;
  overflow-y: auto;
}
.tw-section label.tw-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.6rem;
}
/* Selector de "personalidad" (3 botones tipo toggle) */
.tw-radio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}
.tw-radio button {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  padding: 0.55rem 0.3rem;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tw-radio button:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: white;
}
.tw-radio button.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #05224b;
  font-weight: 800;
}
/* Selector de color de acento (swatches circulares) */
.tw-swatches {
  display: flex;
  gap: 0.55rem;
}
.tw-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition:
    transform 0.2s,
    border-color 0.2s;
  outline: none;
  flex-shrink: 0;
}
.tw-swatch:hover {
  transform: scale(1.1);
}
.tw-swatch.on {
  border-color: white;
  transform: scale(1.05);
}
/* Slider de intensidad de la foto del hero */
.tw-slider-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.tw-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}
.tw-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid #05224b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.tw-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: 3px solid #05224b;
}
.tw-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* ═══════════ 18. WHATSAPP FLOAT ═══════════ */
/* Botón flotante de WhatsApp con pulso animado */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45);
  animation: waPulse 2s infinite;
  transition: transform 0.25s;
}
.wa-float:hover {
  transform: scale(1.08);
}
.wa-float svg {
  width: 30px;
  height: 30px;
  fill: white;
}

/* ═══════════ 19. ANIMACIONES ═══════════ */
/* Aparición con desplazamiento hacia arriba (textos del hero) */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Aparición simple (fade) */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Parpadeo del punto de los badges */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* Zoom lento y continuo del fondo del hero */
@keyframes slowZoom {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1.12);
  }
}
/* Rebote del punto dentro del ícono de scroll */
@keyframes scrollDot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(10px);
    opacity: 0.3;
  }
}
/* Pulso del botón flotante de WhatsApp */
@keyframes waPulse {
  0% {
    box-shadow:
      0 14px 30px rgba(37, 211, 102, 0.45),
      0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow:
      0 14px 30px rgba(37, 211, 102, 0.45),
      0 0 0 22px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow:
      0 14px 30px rgba(37, 211, 102, 0.45),
      0 0 0 0 rgba(37, 211, 102, 0);
  }
}
/* Partículas subiendo en el CTA final (legacy) */
@keyframes floatY {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) translateX(20px);
    opacity: 0;
  }
}
/* Clases de "reveal" al hacer scroll, activadas por el IntersectionObserver del script */
.rev {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s,
    transform 0.65s;
}
.revL {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.revR {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.7s,
    transform 0.7s;
}
.rev.on,
.revL.on,
.revR.on {
  opacity: 1;
  transform: translate(0);
}

/* ═══════════ 20. RESPONSIVE ═══════════ */
/* Ajustes para pantallas de hasta 960px (tablet / mobile) */
@media (max-width: 960px) {
  nav {
    padding: 1rem 1.5rem;
  }
  .nav-links {
    display: none;
  }
  .nav-burger {
    display: flex;
  }
  .hero-content {
    padding: 1.5rem;
    padding-top: 5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-left {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-badge {
    display: none;
  }
  .hero h1 {
    font-size: 2.5rem;
    white-space: normal;
  }
  .hero-accent {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  .hero-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 100%;
  }
  .hero-btns {
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 0;
  }
  .btn-primary,
  .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 10px;
  }
  .hero-wa {
    display: none;
  }
  .hero-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
  }
  .stat-card {
    padding: 0.5rem 0.8rem;
    min-width: auto;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
  }
  .stat-num {
    font-size: 1rem;
    margin-bottom: 0;
  }
  .stat-sep {
    display: none;
  }
  .stat-label {
    font-size: 0.6rem;
  }
  .scroll-hint {
    display: none;
  }
  .servicios {
    padding: 4rem 1.5rem;
  }
  .serv-grid {
    grid-template-columns: 1fr;
  }
  .tipos {
    padding: 3rem 1.5rem 4rem;
  }
  .tipos-head {
    gap: 0.5rem;
  }
  .tipos-grid {
    grid-template-columns: 1fr;
  }
  .tipo-img {
    height: 260px;
  }
  .cont-wrap {
    padding: 4rem 1.5rem 5rem;
  }
  .cont-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cont-form {
    padding: 1.6rem 1.5rem 1.5rem;
  }
  footer {
    padding: 3rem 1.5rem 1.5rem;
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .servicios-wrap,
  .nos-wrap,
  .zona,
  .cont-wrap {
    padding: 4rem 1.5rem;
  }
  .serv-grid {
    grid-template-columns: 1fr;
  }
  .serv-mini {
    grid-template-columns: 1fr;
  }
  .urg-wrap {
    padding: 3rem 1.5rem;
  }
  .urg {
    padding: 2.5rem 1.5rem;
  }
  .nos {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .nos-img img {
    height: 380px;
  }
  .cont {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .cta-final {
    padding: 4.5rem 1.5rem;
  }
  footer {
    padding: 3rem 1.5rem 2rem;
  }
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .sobre {
    padding: 3rem 1.5rem;
  }
  .sobre-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .sobre-img-wrap {
    min-height: 250px;
  }
  .sobre-cards {
    grid-template-columns: 1fr 1fr;
  }
}