:root {
  --brand-blue: #0056b3;
  --brand-teal: #008080;
  --brand-navy: #002147;
  --light-blue-bg: #0099ff;
  --white: #ffffff;
}

body {
  font-family: "Montserrat", sans-serif;
  background-color: var(--light-blue-bg);
}

/* Logo y Hero se mantienen igual */
.brand-container {
  height: 60px;
}
.main-logo-img {
  height: 60px;
  width: auto;
  object-fit: contain;
}
.brand-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

section {
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(
      circle at 90% 10%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 20%
    );
}

.hero-section {
  background: linear-gradient(135deg, #0077b6 0%, #003f5c 100%);
  min-height: 80vh;
}

.btn-cta {
  background: linear-gradient(to right, #0056b3, #00c6ff);
  color: white;
  padding: 12px 25px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-frame {
  width: 300px;
  height: 300px;
  background: #e0e0e0;
  border-radius: 40px;
  position: absolute;
  border: 8px solid rgba(255, 255, 255, 0.2);
}
.frame-1 {
  right: 50px;
  top: -150px;
  transform: rotate(-10deg);
  z-index: 1;
}
.frame-2 {
  right: 0;
  top: 0;
  transform: rotate(15deg);
  z-index: 2;
}

/* About Section */
.glass-box {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
}

.image-mask {
  border-radius: 60px 0 60px 0;
  overflow: hidden;
  border: 5px solid rgba(255, 255, 255, 0.3);
}

.service-card {
  background: var(--white);
  border-radius: 40px; /* Bordes muy redondeados como el boceto */
  min-height: 100%;
  position: relative;
  padding: 15px; /* Espacio interno para que el header no toque el borde del pin */
  transition: transform 0.3s ease;
  border: none;
  margin-top: 20px;
}

.service-card:hover {
  transform: translateY(-10px);
}

/* Tachuela / Pin */
.card-pin {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 28px;
  color: #b0b0b0; /* Color metálico suave */
  filter: drop-shadow(0px 3px 2px rgba(0, 0, 0, 0.2));
}

/* Encabezado de la tarjeta */
.card-header-custom {
  border-radius: 30px; /* Redondeado interno */
  padding: 25px 15px;
  color: white;
  font-weight: 700;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
  min-height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: inset 0px -4px 10px rgba(0, 0, 0, 0.1);
}

/* Colores de encabezados según el boceto */
.header-blue {
  background-color: #007cc3;
}
.header-teal {
  background-color: #008f8f;
}
.header-navy {
  background-color: #002b5c;
}

/* Cuerpo del texto */
.card-body-custom {
  padding: 0 10px;
  color: #444;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.5;
}

.card-body-custom p {
  margin-bottom: 15px;
}

.card-body-custom ul {
  text-align: left;
  color: #555;
}

.testimonial-card {
  background: white;
  border-radius: 30px;
  padding: 30px 10px;
  color: #333;
  min-height: 100%;
}

.test-img-container img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid var(--light-blue-bg);
  object-fit: cover;
}