/* =====================================================
   UNDERBARBER — styles.css
   =====================================================
   ÍNDICE:
   1.  Variables CSS (colores, fuentes, espaciado)
   2.  Reset & Base
   3.  Componentes reutilizables (botones, eyebrow, títulos)
   4.  Navbar
   5.  Hero
   6.  Banda de estadísticas
   7.  Sobre Nosotros
   8.  Servicios
   9.  Banner CTA
   10. Galería
   11. Testimonios
   12. Contacto
   13. Footer
   14. WhatsApp flotante
   15. Animaciones
   16. Media Queries (responsive móvil)
===================================================== */


/* =====================================================
   1. VARIABLES CSS
   Cambia aquí los colores, fuentes y tamaños del sitio.
===================================================== */
:root {
  /* Paleta de colores */
  --color-bg: #0a0a0c;
  /* Fondo principal negro profundo */
  --color-bg-2: #111113;
  /* Fondo secundario ligeramente más claro */
  --color-bg-3: #18181b;
  /* Tarjetas y secciones alternas */
  --color-accent: #D11313;
  /* Dorado: color de acento principal */
  --color-accent-2: #B00F0F;
  /* Dorado claro: hovers y detalles */
  --color-text: #ffffff;
  /* Texto principal (blanco) */
  --color-text-muted: #a0a5b0;
  /* Texto secundario / subtítulos (gris claro) */
  --color-border: #27272a;
  /* Bordes oscuros y elegantes */
  --color-white: #ffffff;

  /* Fuentes */
  --font-display: 'Playfair Display', Georgia, serif;
  /* Títulos */
  --font-body: 'DM Sans', sans-serif;
  /* Texto general */

  /* Espaciado estándar de secciones */
  --section-pad: 5rem 1.5rem;
  --section-pad-sm: 3rem 1.5rem;

  /* Transición estándar */
  --transition: 0.3s ease;

  /* Sombra de tarjeta */
  --card-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
}


/* =====================================================
   2. RESET & BASE
===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

ul {
  list-style: none;
}


/* =====================================================
   3. COMPONENTES REUTILIZABLES
===================================================== */

/* Contenedor de ancho máximo centrado */
.section-container {
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* Eyebrow: texto pequeño encima de títulos */
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

/* Títulos de sección */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: 1.2rem;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 520px;
}

/* Encabezado centrado */
.section-header.center {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header.center .section-subtitle {
  margin: 0 auto;
}

/* ─── Botones ─── */

/* Botón primario dorado */
.btn-primary {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  border: 2px solid var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(206, 14, 17, 0.35);
}

.btn-primary.large {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

.btn-primary.full-width {
  width: 100%;
  text-align: center;
  justify-content: center;
}

/* Botón secundario contorno */
.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition);
  border: 2px solid rgba(245, 240, 232, 0.3);
}

.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Acento dorado en el logo */
.accent {
  color: var(--color-accent);
}


/* =====================================================
   4. NAVBAR
===================================================== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.2rem 2rem;
  transition: background var(--transition), padding var(--transition), box-shadow var(--transition);
}

/* Estilo cuando se hace scroll (añadido por JS) */
.navbar.scrolled {
  background: rgba(10, 10, 12, 0.95);
  padding: 0.8rem 2rem;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 45px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform var(--transition);
}

.logo-img:hover {
  transform: scale(1.05);
}

/* Links de navegación */
.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition);
  position: relative;
  padding-bottom: 4px;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition);
}

.nav-link:hover {
  color: var(--color-accent);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Botón de la navbar */
.btn-nav {
  display: inline-block;
  background: transparent;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 2px;
  transition: all var(--transition);
}

.btn-nav:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* Botón hamburguesa (solo mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition);
}

.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* =====================================================
   5. HERO
===================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 5rem;

  /* ─ Imagen de fondo del hero ─
     Reemplaza img/hero-bg.jpg con tu foto real del local.
     Si no tienes imagen, se muestra un patrón geométrico. */
  background-image: url('../images/7.jpeg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;

  /* Patrón de respaldo si no hay imagen */
  background-color: var(--color-bg-2);
}

/* Overlay oscuro encima de la imagen */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
      rgba(0, 0, 0, 0.82) 0%,
      rgba(0, 0, 0, 0.6) 50%,
      rgba(0, 0, 0, 0.8) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-white);
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}

.hero-title em {
  font-style: italic;
  color: var(--color-accent);
}

.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(245, 240, 232, 0.7);
  line-height: 1.8;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.8s forwards;
}

/* Indicador de scroll */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  z-index: 2;
}

.hero-scroll span {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: var(--color-accent);
  animation: scrollPulse 2s ease infinite;
}


/* =====================================================
   6. BANDA DE ESTADÍSTICAS
===================================================== */
.stats-band {
  background: var(--color-accent);
  padding: 2.5rem 1.5rem;
}

.stats-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.stat-item {
  text-align: center;
  color: var(--color-white);
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
}


/* =====================================================
   7. SOBRE NOSOTROS
===================================================== */
.about {
  padding: var(--section-pad);
  background: var(--color-bg-2);
}

/* Grid de 2 columnas: imagen | texto */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* Contenedor de imagen */
.about-image-wrap {
  position: relative;
}

.about-img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 2px;
  /* Borde dorado sutil */
  outline: 1px solid rgba(201, 76, 76, 0.837);
  outline-offset: 8px;
}

/* Placeholder visual cuando no hay imagen */
.img-placeholder {
  width: 100%;
  height: 500px;
  background: var(--color-bg-3);
  border: 2px dashed var(--color-border);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  text-align: center;
}

.img-placeholder small {
  font-size: 0.8rem;
}

/* Badge flotante sobre la imagen */
.about-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: var(--color-accent);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 2px;
  box-shadow: 0 8px 30px rgba(209, 19, 19, 0.4);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.badge-icon {
  font-size: 1.5rem;
}

/* Texto del about */
.about-desc {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  font-size: 0.97rem;
}

/* Lista de valores */
.about-values {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 2rem 0;
}

.about-values li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.value-icon {
  font-size: 1.5rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.about-values strong {
  display: block;
  color: var(--color-text);
  font-size: 0.95rem;
  margin-bottom: 2px;
}

.about-values p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}


/* =====================================================
   8. SERVICIOS
===================================================== */
.services {
  padding: var(--section-pad);
  background: var(--color-bg);
}

/* Grid responsivo de tarjetas: 3 columnas en desktop */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Tarjeta de servicio */
.service-card {
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  border-radius: 2px;
  position: relative;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: var(--card-shadow);
}

/* Tarjeta destacada (popular) */
.service-card.featured {
  border-color: var(--color-accent);
  background: linear-gradient(145deg,
      rgba(201, 168, 76, 0.08) 0%,
      var(--color-bg-3) 100%);
}

.featured-tag {
  position: absolute;
  top: -0.8rem;
  left: 1.2rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
}

.service-icon {
  font-size: 2rem;
  margin-bottom: 0.3rem;
}

.service-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

.service-desc {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  flex-grow: 1;
}

.service-price {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* Botón dentro de la tarjeta */
.service-btn {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: 0.5rem 1.2rem;
  border-radius: 2px;
  align-self: flex-start;
  transition: all var(--transition);
}

.service-btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

/* CTA final de servicios */
.services-cta {
  text-align: center;
}


/* =====================================================
   9. BANNER CTA
===================================================== */
.cta-banner {
  background:
    linear-gradient(rgba(10, 10, 12, 0.85), rgba(10, 10, 12, 0.85)),
    /* Imagen de fondo opcional para el banner */
    url('../img/cta-bg.jpg') center / cover no-repeat;
  background-color: var(--color-bg-3);
  border-top: 1px solid var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding: 5rem 1.5rem;
  text-align: center;
}

.cta-content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.cta-sub {
  color: var(--color-text-muted);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}


/* =====================================================
   10. GALERÍA
===================================================== */
.gallery {
  padding: var(--section-pad);
  background: var(--color-bg-2);
}

/* Grid asimétrico: mezcla de tamaños para variedad visual */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 220px 220px;
  gap: 0.8rem;
}

/* Item normal */
.gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-3);
  cursor: pointer;
}

/* Item alto: ocupa 2 filas */
.gallery-item.tall {
  grid-row: span 2;
}

/* Item ancho: ocupa 2 columnas */
.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

/* Overlay con etiqueta al hover */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay span {
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

/* Placeholder cuando no hay imagen */
.gallery-item.no-img::after {
  content: '📸 Foto próximamente';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

.gallery-item.no-img img {
  display: none;
}


/* =====================================================
   11. TESTIMONIOS
===================================================== */
.testimonials {
  padding: var(--section-pad);
  background: var(--color-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Tarjeta de testimonio */
.testimonial-card {
  background: var(--color-bg-3);
  border: 1px solid var(--color-border);
  padding: 2rem;
  border-radius: 2px;
  transition: border-color var(--transition);
}

.testimonial-card:hover {
  border-color: rgba(201, 168, 76, 0.3);
}

/* Estrellas */
.stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.testimonial-text {
  font-size: 0.93rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Avatar circular con iniciales */
.author-avatar {
  width: 42px;
  height: 42px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.testimonial-author strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text);
}

.testimonial-author span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}


/* =====================================================
   12. CONTACTO
===================================================== */
.contact {
  padding: var(--section-pad);
  background: var(--color-bg-2);
}

/* Grid de 2 columnas: info | formulario */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Lista de datos de contacto */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.contact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-icon {
  font-size: 1.3rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.contact-list strong {
  display: block;
  color: var(--color-text);
  font-size: 0.9rem;
  margin-bottom: 3px;
}

.contact-list p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.contact-list a {
  color: var(--color-accent);
}

.contact-list a:hover {
  color: var(--color-accent-2);
}

/* Botones de redes */
.social-buttons {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.social-btn {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.4rem;
  border-radius: 2px;
  transition: all var(--transition);
}

.social-btn.whatsapp {
  background: #25D366;
  color: white;
}

.social-btn.whatsapp:hover {
  background: #1da851;
  transform: translateY(-2px);
}

.social-btn.instagram {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: white;
}

.social-btn.instagram:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* Formulario de contacto */
.contact-form-wrap {
  background: var(--color-bg-3);
  padding: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.form-subtitle {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* Grupos del formulario */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

.form-group label {
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Inputs, select y textarea */
.form-group input,
.form-group select,
.form-group textarea {
  background: #1c1d22;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.8rem 1rem;
  border-radius: 2px;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-group select option {
  background: #1c1d22;
}


/* =====================================================
   13. FOOTER
===================================================== */
.footer {
  background: #08080a;
  border-top: 1px solid var(--color-border);
  padding: 4rem 1.5rem 0;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
}

.footer-brand .logo-text {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 1rem;
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1.2rem;
}

.footer-brand p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

.footer-links h4,
.footer-services h4 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.2rem;
}

.footer-links ul li,
.footer-services ul li {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}

.footer-links ul li a {
  transition: color var(--transition);
}

.footer-links ul li a:hover {
  color: var(--color-accent);
}

/* Barra inferior del footer */
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-bottom p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}


/* =====================================================
   14. WHATSAPP FLOTANTE
===================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
  transition: transform var(--transition), box-shadow var(--transition);
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 30px rgba(37, 211, 102, 0.6);
}

/* Pulso animado alrededor del botón */
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.4);
  animation: waPulse 2s ease-out infinite;
}


/* =====================================================
   15. ANIMACIONES
===================================================== */

/* Entrada desde abajo */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pulso del scroll indicator */
@keyframes scrollPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scaleY(0.8);
  }

  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Pulso del botón de WhatsApp */
@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Clase utilitaria para reveal al scroll (añadida por JS) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =====================================================
   16. MEDIA QUERIES – RESPONSIVE MÓVIL
   Ajustes para pantallas menores a 900px y 600px
===================================================== */

/* Tablets (900px) */
@media (max-width: 900px) {

  /* Menú hamburguesa */
  .hamburger {
    display: flex;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 80vw);
    height: 100vh;
    background: rgba(18, 19, 22, 0.98);
    padding: 6rem 2rem 2rem;
    transition: right 0.4s ease;
    border-left: 1px solid var(--color-border);
    backdrop-filter: blur(20px);
  }

  .nav-menu.open {
    right: 0;
  }

  .nav-links {
    flex-direction: column;
    gap: 1.5rem;
  }

  .nav-link {
    font-size: 1rem;
  }

  /* About 1 columna */
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-badge {
    right: 1rem;
    bottom: 1rem;
  }

  /* Servicios 2 columnas */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Galería simplificada */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .gallery-item.tall {
    grid-row: span 1;
  }

  .gallery-item.wide {
    grid-column: span 2;
  }

  /* Testimonios 1 columna */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Contacto 1 columna */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  /* Footer 2 columnas */
  .footer-container {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: span 2;
  }

}

/* Móvil (600px) */
@media (max-width: 600px) {

  :root {
    --section-pad: 4rem 1.2rem;
  }

  /* Servicios 1 columna */
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* Stats en 2 columnas */
  .stats-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .stat-divider {
    display: none;
  }

  /* Galería 1 columna */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item.wide {
    grid-column: span 1;
  }

  /* Footer 1 columna */
  .footer-container {
    grid-template-columns: 1fr;
  }

  .footer-brand {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Hero botones en columna */
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

}