/* =============================================
   SERENA SPA — Estilos de la página de Servicios
   servicios.css

   Índice:
   1.  Hero interno
   2.  Tabs de navegación
   3.  Grid y tarjetas de masajes / faciales
   4.  Badges (duración e intensidad)
   5.  Tier cards (Spa Capilar)
   6.  Gift Cards
   7.  CTA de reserva
   8.  Responsive
   ============================================= */

/* ─────────────────────────────────────────────
   1. HERO INTERNO
   Encabezado compacto para páginas interiores
   ───────────────────────────────────────────── */
.hero-interno {
  background-color: var(--color-crema);
  padding: calc(80px + var(--espacio-xl)) 0 0;  /* compensa navbar */
}

.hero-interno__contenido {
  padding-bottom: 0;
}

.hero-interno h1 {
  font-size: clamp(var(--texto-3xl), 5vw, var(--texto-5xl));
  margin-bottom: var(--espacio-sm);
}

.hero-interno p {
  max-width: 600px;
  font-size: var(--texto-lg);
  margin-bottom: var(--espacio-lg);
}

/* ─────────────────────────────────────────────
   2. TABS DE NAVEGACIÓN
   Barra de categorías pegada al hero interno
   ───────────────────────────────────────────── */
.tabs-servicios {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--color-borde);
  margin-top: var(--espacio-lg);
  overflow-x: auto;
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE */
}
.tabs-servicios::-webkit-scrollbar { display: none; }

.tab {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
  border-bottom: 3px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
  white-space: nowrap;
}
.tab:hover,
.tab.activo {
  color: var(--color-verde);
  border-bottom-color: var(--color-verde);
}

/* ─────────────────────────────────────────────
   2b. INTRO DE SECCIÓN CON IMAGEN
   Layout split texto + foto alternando lados
   ───────────────────────────────────────────── */
.seccion__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: var(--espacio-xl);
}

/* Variante: imagen a la izquierda */
.seccion__intro--invertido .seccion__intro-imagen {
  order: -1;
}

.seccion__intro-texto .etiqueta { margin-bottom: var(--espacio-xs); }
.seccion__intro-texto h2         { margin-bottom: var(--espacio-sm); }
.seccion__intro-texto p          { font-size: var(--texto-lg); }

.seccion__intro-imagen {
  border-radius: var(--radio-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--sombra-md);
}
.seccion__intro-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease-out;
}
.seccion__intro-imagen:hover img { transform: scale(1.03); }

/* ─────────────────────────────────────────────
   3. GRID Y TARJETAS DE MASAJES / FACIALES
   Grid de 3 columnas con tarjeta horizontal interna
   ───────────────────────────────────────────── */
.grid-masajes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-md);
  margin-top: var(--espacio-lg);
}

.tarjeta-masaje {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-md);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.tarjeta-masaje:hover {
  box-shadow: var(--sombra-md);
  transform: translateY(-3px);
}


/* Cabecera: nombre + precio en la misma línea */
.tarjeta-masaje__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--espacio-sm);
}

.tarjeta-masaje__nombre {
  font-size: var(--texto-xl);
  color: var(--color-verde);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.tarjeta-masaje__meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tarjeta-masaje__precio {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  font-weight: 700;
  color: var(--color-verde);
  white-space: nowrap;
  flex-shrink: 0;
}

.tarjeta-masaje__descripcion {
  font-size: var(--texto-sm);
  line-height: 1.7;
  flex: 1;
}

/* ─────────────────────────────────────────────
   4. BADGES
   Pastillas de duración e intensidad
   ───────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge--duracion {
  background-color: var(--color-crema);
  color: var(--color-texto-suave);
}

/* Intensidad suave — verde muy claro */
.badge--suave {
  background-color: rgba(44, 95, 46, 0.1);
  color: var(--color-verde);
}

/* Intensidad media — amarillo suave */
.badge--medio {
  background-color: rgba(180, 130, 40, 0.12);
  color: #7a5c18;
}

/* Intensidad profunda — rojo suave */
.badge--profundo {
  background-color: rgba(160, 50, 50, 0.1);
  color: #8b2e2e;
}

/* ─────────────────────────────────────────────
   5. TIER CARDS (SPA CAPILAR)
   Tres columnas de comparación de planes
   ───────────────────────────────────────────── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-md);
  margin-top: var(--espacio-lg);
  align-items: start;
}

.tier-card {
  background-color: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
  position: relative;
}

/* Tier destacado — fondo verde, texto blanco */
.tier-card--destacado {
  background-color: var(--color-verde);
  border-color: var(--color-verde);
  box-shadow: var(--sombra-md);
  transform: translateY(-8px);
}
.tier-card--destacado .tier-card__nombre,
.tier-card--destacado .tier-card__monto {
  color: var(--color-blanco);
}
.tier-card--destacado .tier-card__duracion {
  color: rgba(255,255,255,0.7);
}
.tier-card--destacado .incluye-lista li {
  color: rgba(255,255,255,0.9);
}
.tier-card--destacado .incluye-lista li::before {
  color: rgba(255,255,255,0.7);
}

/* Etiqueta "Más popular" */
.tier-card__etiqueta-top {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-blanco);
  color: var(--color-verde);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid var(--color-verde);
}

.tier-card__encabezado {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.tier-card__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  color: var(--color-verde);
  font-weight: 600;
}

.tier-card__precio {
  text-align: right;
}

.tier-card__monto {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  font-weight: 700;
  color: var(--color-verde);
  line-height: 1;
}

.tier-card__duracion {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Lista de elementos incluidos */
.incluye-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.incluye-lista li {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  padding-left: 1.25rem;
  position: relative;
  line-height: 1.5;
}

.incluye-lista li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-verde);
  font-weight: 700;
  font-size: var(--texto-xs);
  top: 2px;
}

.tier-card__nota {
  font-size: var(--texto-xs);
  color: var(--color-texto-suave);
  font-style: italic;
  text-align: center;
  margin-top: -0.5rem;
}

/* ─────────────────────────────────────────────
   6. GIFT CARDS
   Bloque horizontal con tarjeta visual a la derecha
   ───────────────────────────────────────────── */
.gift-card-bloque {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.gift-card-texto h2 { margin-bottom: var(--espacio-sm); }

.gift-card-lista {
  list-style: none;
  margin: var(--espacio-md) 0 var(--espacio-lg);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gift-card-lista li {
  font-size: var(--texto-sm);
  color: var(--color-texto-suave);
  padding-left: 1.25rem;
  position: relative;
}

.gift-card-lista li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-verde);
  font-weight: 700;
}

/* Tarjeta visual de gift card */
.gift-card-visual {
  display: flex;
  justify-content: center;
}

.gift-card-preview {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1.586;
  background: linear-gradient(135deg, var(--color-verde) 0%, #1E4220 100%);
  border-radius: var(--radio-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  box-shadow: 0 12px 40px rgba(44, 95, 46, 0.35);
  padding: var(--espacio-md);
}

.gift-card-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.gift-card-preview__nombre {
  font-family: var(--fuente-titulo);
  font-size: var(--texto-2xl);
  color: var(--color-blanco);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: center;
}

.gift-card-preview__subtitulo {
  font-size: var(--texto-xs);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
}

.gift-card-preview__tag {
  margin-top: 0.5rem;
  background-color: rgba(255,255,255,0.15);
  color: var(--color-blanco);
  font-size: var(--texto-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  text-align: center;
}

/* ─────────────────────────────────────────────
   7. CTA DE RESERVA
   Sección final de llamada a la acción
   ───────────────────────────────────────────── */
.cta-reserva {
  background-color: var(--color-crema);
}

.cta-reserva h2 { margin-bottom: var(--espacio-sm); }

/* ─────────────────────────────────────────────
   8. RESPONSIVE
   ───────────────────────────────────────────── */

/* Tablet (≤ 1024px): de 3 a 2 columnas */
@media (max-width: 1024px) {
  .seccion__intro { gap: 2rem; }
  .grid-masajes  { grid-template-columns: repeat(2, 1fr); }
  .tier-grid     { grid-template-columns: repeat(2, 1fr); }
  .tier-card--destacado { transform: none; }

  .gift-card-bloque { gap: 2.5rem; }
}

/* Móvil (≤ 768px): una columna */
@media (max-width: 768px) {
  .hero-interno { padding-top: calc(80px + var(--espacio-lg)); }
  .hero-interno p { font-size: var(--texto-base); }

  .tabs-servicios { gap: 0; }
  .tab { padding: 0.8rem 1rem; font-size: var(--texto-xs); }

  .seccion__intro { grid-template-columns: 1fr; }
  .seccion__intro--invertido .seccion__intro-imagen { order: 0; }
  .seccion__intro-imagen { aspect-ratio: 16/9; }

  .grid-masajes  { grid-template-columns: 1fr; }
  .tier-grid     { grid-template-columns: 1fr; }

  .tarjeta-masaje__cabecera { flex-wrap: wrap; }

  .gift-card-bloque {
    grid-template-columns: 1fr;
    gap: var(--espacio-lg);
  }
  .gift-card-visual { order: -1; } /* tarjeta arriba en móvil */
  .gift-card-preview { max-width: 280px; }
}

/* Móvil pequeño (≤ 480px) */
@media (max-width: 480px) {
  .tab { padding: 0.7rem 0.75rem; }
  .tarjeta-masaje__precio { font-size: var(--texto-xl); }
}