/* =========================================================================
   MARCELLA BEAUTY NAILS - HOJA DE ESTILOS ÚNICA v2
   Corrección de páginas de detalle + coherencia visual
   ========================================================================= */

/* ================= 01. VARIABLES Y RESET ================= */
:root {
  --color-principal: #e8a9d4;
  --color-secundario: #7d4e68;
  --color-acento: #fceef6;
  --color-blanco: #ffffff;
  --color-gris-claro: #fcf8fa;
  --color-texto-suave: #9c808f;
  --color-grafito: #3a3a3a;
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #20ba59;
  --fuente-titulos: 'Playfair Display', Georgia, serif;
  --fuente-cuerpo: 'Raleway', 'Segoe UI', sans-serif;
  --transicion: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --transicion-lenta: transform 1.2s ease-in-out;
  --sombra-premium: 0 10px 30px rgba(125, 78, 104, 0.08);
  --sombra-hover: 0 15px 35px rgba(125, 78, 104, 0.15);
  --radio: 16px;
  /* [MEJORA - LOGOS UNIFICADOS]: se ajusta de 76px a 80px para que el header siga
     calzando exactamente con la nueva altura del logo (60px + padding), sin dejar
     huecos ni recortar el contenido que hace scroll hacia las anclas */
  --alto-header: 80px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: var(--alto-header);
}

body {
  font-family: var(--fuente-cuerpo);
  color: var(--color-secundario);
  background-color: var(--color-blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* ================= 02. UTILIDADES BASE ================= */
.container { width: min(1200px, 92%); margin: 0 auto; }

.section { padding: 80px 0; }
.section-alt { background-color: var(--color-gris-claro); }

.section-title {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  text-align: center;
  margin-bottom: 12px;
  color: var(--color-secundario);
}

.section-subtitle {
  text-align: center;
  color: var(--color-texto-suave);
  max-width: 640px;
  margin: 0 auto 45px;
  font-size: 1rem;
}
/* [NUEVO]: enlace directo a WhatsApp dentro del texto de "Visítanos" */
.link-whatsapp-inline {
  color: var(--color-whatsapp);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transicion);
}
.link-whatsapp-inline:hover { color: var(--color-whatsapp-hover); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  transition: var(--transicion);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  box-shadow: 0 6px 20px rgba(232, 169, 212, 0.4);
}
.btn-primary:hover {
  background-color: var(--color-secundario);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(125, 78, 104, 0.3);
}
.btn-whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-blanco);
}
.btn-whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  transform: translateY(-4px);
}

/* ================= 03. HEADER Y NAVEGACIÓN ================= */
/* [MEJORA PASO 5]: Reducción vertical de padding y tamaño de logo para estilizar la barra fija */
.header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 0; /* Ajustado de 16px a 10px */
  transition: var(--transicion);
  z-index: 1000;
  box-shadow: 0 2px 20px rgba(125, 78, 104, 0.05);
}
.header.scrolled { padding: 6px 0; background: rgba(255, 255, 255, 0.98); }

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 54px;
}

.logo-link { display: flex; align-items: center; gap: 12px; }

/* [MEJORA - LOGOS UNIFICADOS]: misma altura proporcional que .footer-logo en PC (60px) */
.logo-img {
  height: 100px;
  width: auto;
  object-fit: contain;
  transition: var(--transicion);
}
.header.scrolled .logo-img { height: 50px; }

.logo-text {
  font-family: var(--fuente-titulos);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-secundario);
  line-height: 1.1;
}
.logo-text span {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-principal);
}

.nav ul { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-block;
  color: var(--color-secundario);
  font-weight: 600;
  padding: 8px 12px; /* Padding vertical ajustado para equilibrio */
  font-size: 0.93rem;
  border-radius: 8px;
  transition: var(--transicion);
}
.nav a:hover, .nav a.active {
  color: var(--color-principal);
  background-color: var(--color-acento);
}

.header-redes { display: flex; align-items: center; gap: 10px; }
.header-redes a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background-color: var(--color-acento);
  color: var(--color-secundario);
  font-size: 0.95rem;
  transition: var(--transicion);
}
.header-redes a:hover { transform: translateY(-3px); color: #fff; background-color: var(--color-principal); }
.header-redes a.red-whatsapp:hover { background-color: var(--color-whatsapp); }
.header-redes a.red-facebook:hover { background-color: #1877f2; }
.header-redes a.red-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.nav-redes-movil { display: none; }
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  color: var(--color-secundario);
  background: none; border: none; padding: 6px 10px;
}

/* ================= 04. MENÚ DESPLEGABLE ================= */
.dropdown { position: relative; }
.dropdown-toggle { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; }
.dropdown-toggle .fa-chevron-down { font-size: 0.72rem; transition: transform 0.25s ease; }
.dropdown.is-open > .dropdown-toggle { color: var(--color-principal); }
.dropdown.is-open > .dropdown-toggle .fa-chevron-down { transform: rotate(180deg); }

.nav .dropdown-menu {
  position: absolute;
  top: 100%; left: 50%;
  min-width: 215px;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(232, 169, 212, 0.25);
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(125, 78, 104, 0.12);
  padding: 8px 0;
  margin-top: 12px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(12px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
.nav .dropdown-menu li a {
  display: block;
  padding: 9px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 0;
}
.nav .dropdown-menu li a:hover {
  background-color: rgba(232, 169, 212, 0.14);
  padding-left: 26px;
}

/* ================= 05. HERO ================= */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--alto-header) + 40px) 0 60px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(252, 238, 246, 0.7)),
    url('https://images.unsplash.com/photo-1604654894610-df63bc536371?w=1920&q=80') no-repeat center center / cover;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232, 169, 212, 0.15), rgba(125, 78, 104, 0.1));
  pointer-events: none;
}
#particles-js {
  position: absolute; inset: 0;
  z-index: 1;
  /* [MEJORA PASO 7]: Habilitar puntero para permitir seguimiento fluido del cursor */
  pointer-events: auto;
}
.hero-content {
  position: relative; z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 22px;
  padding: 0 20px;
}
.hero h1 {
  font-family: var(--fuente-titulos);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--color-secundario);
  line-height: 1.2;
  font-weight: 700;
}
.hero h1 span { display: block; color: var(--color-principal); font-style: italic; }
.hero p {
  font-size: 1.15rem;
  color: var(--color-grafito);
  max-width: 620px;
  font-weight: 500;
}
.hero-acciones { display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }

.animate-up { opacity: 0; animation: fadeInUp 0.9s ease forwards; }
.animate-up:nth-child(2) { animation-delay: 0.2s; }
.animate-up:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= 06. TARJETAS 3D FLIP ================= */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 30px;
}
.flip-card {
  background: transparent;
  height: 380px;
  perspective: 1400px;
  cursor: pointer;
  border: none;
  outline: none;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.flip-card:hover {
  transform: translateY(-8px) scale(1.025);
}
.flip-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra-premium);
  transition: box-shadow 0.4s ease;
}
.flip-card:hover .flip-card-front,
.flip-card:hover .flip-card-back {
  box-shadow: var(--sombra-hover);
}

/* Control estricto de interactividad móvil/escritorio según estado de giro */
.flip-card .flip-card-front {
  z-index: 2;
  pointer-events: auto;
}
.flip-card .flip-card-back {
  z-index: 1;
  pointer-events: none;
}
.flip-card.flipped .flip-card-front {
  z-index: 1;
  pointer-events: none;
}
.flip-card.flipped .flip-card-back {
  z-index: 3;
  pointer-events: auto;
}

.card-image-wrapper {
  position: relative;
  width: 100%; height: 100%;
  background-color: var(--color-acento);
  overflow: hidden;
}
.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto hace que las fotos de servicios vuelvan a pantalla completa */
    transition: transform 1.2s ease-in-out;
}
.flip-card:hover .service-img,
.flip-card:focus-visible .service-img {
  transform: scale(1.12);
}
.card-image-wrapper::after {
  content: '';
  position: absolute; inset: 0;
  background-color: rgba(232, 169, 212, 0);
  transition: background-color 0.5s ease;
  pointer-events: none;
}
.flip-card:hover .card-image-wrapper::after {
  background-color: rgba(232, 169, 212, 0.25);
}
.service-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 25px 20px;
  background: linear-gradient(to top, rgba(125, 78, 104, 0.9), transparent);
  color: #fff;
  text-align: center;
  z-index: 2;
  transition: background 0.5s ease, padding-bottom 0.4s ease;
}
.service-overlay i { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.service-overlay h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.45rem;
  font-weight: 700;
}
.overlay-rol { font-size: 0.87rem; color: rgba(255, 255, 255, 0.9); margin-top: 2px; }

/* Botón 'Tocar para ver más' interactivo con área táctil, cursor pointer y hover dedicado */
.card-hint {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-secundario);
  font-size: 0.8rem; font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  transition: var(--transicion);
  pointer-events: auto;
  cursor: pointer;
}
.card-hint:hover {
  background-color: var(--color-principal);
  color: #fff;
  transform: translateX(-50%) scale(1.06);
  box-shadow: 0 6px 20px rgba(232, 169, 212, 0.5);
}
.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, var(--color-secundario), #6a4159);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  padding: 30px 25px;
  text-align: center;
  transform-style: preserve-3d;
}
.flip-card-back h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.45rem;
}
.flip-card-back p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  word-wrap: break-word;
}
/* Bounding box, padding y elevación tridimensional óptima para el botón de agendar cita y ver detalles */
.service-link {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  min-height: 44px;
  border-radius: 50px;
  border: 1.5px solid var(--color-principal);
  background-color: transparent;
  color: var(--color-principal);
  font-weight: 700;
  font-size: 0.95rem;
  transition: var(--transicion);
  cursor: pointer;
  pointer-events: auto !important;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.service-link:hover,
.service-link:active,
.service-link:focus-visible {
  background-color: var(--color-principal);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(232, 169, 212, 0.4);
}
.service-link i {
  transition: transform 0.3s ease;
  pointer-events: none;
}
.service-link:hover i {
  transform: translateX(5px);
}

/* ================= 07. SOBRE MÍ ================= */
.about-container {
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  align-items: center;
  justify-content: center;
  max-width: 1050px;
  margin: 0 auto;
}
.perfil-card { flex: 0 0 340px; max-width: 340px; height: 420px; }
.perfil-card .service-overlay h3 { font-size: 1.6rem; }
.about-text-block { flex: 1; min-width: 300px; }
.about-text-block h2 {
  font-family: var(--fuente-titulos);
  font-size: 2rem;
  margin-bottom: 18px;
}
.about-text-block p {
  font-size: 1.03rem;
  line-height: 1.75;
  margin-bottom: 15px;
}

/* ================= 08. GALERÍA + MODAL ================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: var(--sombra-premium);
  height: 280px;
  background-color: var(--color-acento);
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--sombra-hover); }
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease-in-out;
}
.gallery-item:hover img { transform: scale(1.12); }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background-color: rgba(232, 169, 212, 0);
  transition: background-color 0.4s ease;
  pointer-events: none;
}
.gallery-item:hover::after { background-color: rgba(232, 169, 212, 0.28); }
.gallery-item .gallery-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 14px;
  background: linear-gradient(to top, rgba(58, 58, 58, 0.85), transparent);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 2;
}

.modal-galeria {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center; justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}
.modal-galeria.visible { display: flex; }
.modal-galeria .modal-content {
  position: relative;
  max-width: 900px;
  width: 100%;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  animation: zoomIn 0.4s ease;
}
.modal-galeria img {
  width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: #f5f5f5;
}
.modal-galeria .modal-title {
  text-align: center;
  padding: 18px;
  font-family: var(--fuente-titulos);
  font-size: 1.3rem;
  color: var(--color-secundario);
  background: var(--color-acento);
  margin: 0;
}
.modal-galeria .modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--color-secundario);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicion);
  z-index: 10;
}
.modal-galeria .modal-close:hover {
  background: var(--color-principal);
  color: #fff;
  transform: rotate(90deg);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

/* ================= 08b. MODAL LEGAL (Términos / Política de privacidad) ================= */
/* [NUEVO - CORRECCIÓN 404]: mismo patrón visual que .modal-galeria, adaptado a texto largo */
.modal-legal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center; justify-content: center;
  z-index: 2000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}
.modal-legal.visible { display: flex; }
.modal-legal-content {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  background: #fff;
  border-radius: 18px;
  overflow-y: auto;
  padding: 40px 34px 30px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  animation: zoomIn 0.4s ease;
}
.modal-legal-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  color: var(--color-secundario);
  margin-bottom: 16px;
}
.modal-legal-texto { color: var(--color-grafito); font-size: 0.95rem; line-height: 1.75; }
.modal-legal-texto p { margin-bottom: 14px; }
.modal-legal .modal-close {
  position: absolute;
  top: 12px; right: 14px;
  background: var(--color-acento);
  border: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--color-secundario);
  display: flex; align-items: center; justify-content: center;
  transition: var(--transicion);
  z-index: 10;
}
.modal-legal .modal-close:hover { background: var(--color-principal); color: #fff; transform: rotate(90deg); }
@media (max-width: 768px) {
  .modal-legal-content { padding: 32px 20px 24px; max-height: 80vh; }
  .modal-legal-titulo { font-size: 1.3rem; }
}

/* ================= 09. VIDEOS VERTICALES ================= */
.videos-grid {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.video-item {
  flex: 0 0 240px;
  height: 420px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sombra-premium);
  background: #000;
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.video-item:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: var(--sombra-hover);
}
.video-item video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: #111;
}
.video-item .video-label {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-secundario);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  pointer-events: none;
}

/* ================= 10. CARRUSEL ANTES/DESPUÉS ================= */
.antes-despues {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sombra-premium);
  padding: 25px;
  overflow: hidden;
}
.ad-slider {
  position: relative;
  width: 100%;
  height: 560px;                  /* más alto para que la foto se vea completa */
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  background: var(--color-acento);
}
.ad-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;            /* muestra la imagen completa, sin recortar */
  background: var(--color-acento);
  transition: opacity 0.6s ease;
}
.ad-img.antes { z-index: 2; }
.ad-img.despues { z-index: 1; }
.ad-slider.comparando .ad-img.antes { opacity: 0; }
.ad-slider.comparando .ad-img.despues { opacity: 1; }
.ad-handle {
  position: absolute;
  top: 0; bottom: 0;
  width: 4px;
  background: #fff;
  left: 50%;
  z-index: 5;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  cursor: ew-resize;
}
.ad-handle::after {
  content: '⇆';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--color-secundario);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.ad-labels {
  display: flex;
  justify-content: space-between;
  padding: 12px 5px 0;
  font-weight: 700;
  color: var(--color-secundario);
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.ad-nav {
  display: flex; justify-content: center; gap: 15px;
  margin-top: 22px;
}
.ad-nav button {
  background: #fff;
  border: 2px solid rgba(125, 78, 104, 0.2);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-secundario);
  font-size: 1rem;
  transition: var(--transicion);
}
.ad-nav button:hover {
  background: var(--color-secundario);
  color: #fff;
  border-color: var(--color-secundario);
}
.testimonial-text {
  text-align: center;
  margin-top: 18px;
  font-style: italic;
  color: var(--color-texto-suave);
  font-size: 1.02rem;
}
.testimonial-author {
  text-align: center;
  font-weight: 700;
  color: var(--color-secundario);
  margin-top: 8px;
  font-family: var(--fuente-titulos);
}

/* =========================================================================
   🆕 11. PÁGINAS DE DETALLE DE SERVICIO - CORREGIDAS
   ========================================================================= */

/* Contenedor principal de la página de detalle */
.service-detail {
  padding: calc(var(--alto-header) + 60px) 0 80px;
  background-color: var(--color-blanco);
}

/* Bloque de encabezado con imagen + título */
.service-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 45px;
}

.service-image {
  width: 100%;
  max-width: 400px;           /* 💡 Reducimos un poco el ancho máximo para equilibrar la tarjeta */
  height: 480px;              /* 💡 INCREMENTADO de 360px a 480px para dar espacio vertical a los 4 dedos */
  object-fit: cover;          /* Mantiene el diseño expandido sin bordes vacíos a los lados */
  object-position: center top;/* 💡 Alinea el encuadre arriba para revelar las uñas superiores por completo */
  margin: 0 auto 30px;
  border-radius: var(--radio);
  box-shadow: var(--sombra-hover);
  background-color: var(--color-acento);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
}

.service-image:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px rgba(125, 78, 104, 0.2);
}

.service-header h1 {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--color-secundario);
  line-height: 1.25;
  margin-bottom: 10px;
}

/* 🆕 Bloque de descripción con ancho controlado (evita texto estirado) */
.service-description {
  max-width: 860px;
  margin: 0 auto;
  color: var(--color-grafito);
  font-size: 1.03rem;
  line-height: 1.75;
}

.service-description p {
  margin-bottom: 18px;
}

.service-description h2 {
  font-family: var(--fuente-titulos);
  font-size: 1.55rem;
  color: var(--color-secundario);
  margin: 35px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-acento);
}

/* Listas con ícono corazón */
.service-description ul {
  margin: 12px 0 22px;
  padding-left: 0;
}

.service-description ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  list-style: none;
  font-size: 1rem;
  line-height: 1.65;
}

.service-description ul li::before {
  content: '\f004';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.8rem;
  color: var(--color-principal);
}

/* Botón CTA final */
.service-cta {
  text-align: center;
  margin-top: 45px;
  padding-top: 35px;
  border-top: 1px solid var(--color-acento);
}

/* =========================================================================
   🆕 12. OTROS SERVICIOS (bloque de navegación entre servicios)
   ========================================================================= */
.otros-servicios {
  margin-top: 65px;
  text-align: center;
  padding-top: 40px;
  border-top: 1px dashed rgba(232, 169, 212, 0.4);
}

.otros-servicios h2 {
  font-family: var(--fuente-titulos);
  font-size: 1.5rem;
  color: var(--color-secundario);
  margin-bottom: 25px;
}

/* 🆕 Lista con separación correcta y ordenada */
.otros-servicios-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  max-width: 800px;
  margin: 0 auto;
}

.otros-servicios-lista a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  background-color: var(--color-acento);
  color: var(--color-secundario);
  transition: var(--transicion);
  white-space: nowrap;
}

.otros-servicios-lista a:hover {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 20px rgba(232, 169, 212, 0.45);
}

.otros-servicios-lista a i {
  font-size: 0.9rem;
  transition: transform 0.3s ease;
}

.otros-servicios-lista a:hover i {
  transform: scale(1.2);
}

/* =========================================================================
   13. FOOTER BLANCO LIMPIO
   ========================================================================= */
.footer {
  background-color: var(--color-blanco);
  color: var(--color-grafito);
  border-top: 4px solid var(--color-principal);
  padding: 60px 0 25px;
}
.footer-columns-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-logo {
  /* [MEJORA - LOGOS UNIFICADOS]: misma altura que .logo-img del header en PC (60px) */
  height: 100px;
  width: auto;
  object-fit: contain;
  margin-bottom: 18px;
}
.footer-brand p {
  color: #5a5a5a;
  font-size: 0.94rem;
  line-height: 1.7;
}
.footer-col h3 {
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  color: var(--color-secundario);
  margin-bottom: 18px;
}
.footer-menu li { margin-bottom: 10px; }
.footer-menu a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4a4a4a;
  font-size: 0.93rem;
  transition: var(--transicion);
}
.footer-menu a i {
  font-size: 0.85rem;
  width: 18px;
  text-align: center;
  color: var(--color-principal);
}
.footer-menu a:hover { color: var(--color-principal); padding-left: 5px; }
.footer-siguenos-titulo {
  font-family: var(--fuente-titulos);
  font-size: 1.05rem;
  color: var(--color-secundario);
  margin: 22px 0 14px;
}
.footer-social-icons { display: flex; gap: 12px; }
.footer-social-icons a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background-color: var(--color-acento);
  color: var(--color-secundario);
  font-size: 1.05rem;
  transition: var(--transicion);
}
.footer-social-icons a:hover { transform: translateY(-4px); color: #fff; }
.footer-social-icons a.red-whatsapp:hover { background-color: var(--color-whatsapp); }
.footer-social-icons a.red-facebook:hover { background-color: #1877f2; }
.footer-social-icons a.red-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-bottom {
  border-top: 1px solid #eaeaea;
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: #777;
}
.footer-bottom nav { display: flex; gap: 18px; }
.footer-bottom nav a { color: #666; }
.footer-bottom nav a:hover { color: var(--color-principal); }

/* =========================================================================
   14. BOTONES FLOTANTES
   ========================================================================= */
.scroll-buttons-container {
  position: fixed;
  right: 25px; bottom: 25px;
  display: flex; flex-direction: column-reverse;
  gap: 14px;
  z-index: 999;
}
.btn-float {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  border: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transition: var(--transicion);
}
.float-whatsapp { background-color: var(--color-whatsapp); font-size: 1.7rem; }
.float-whatsapp:hover {
  background-color: var(--color-whatsapp-hover);
  transform: scale(1.1);
}
.float-top {
  background-color: var(--color-secundario);
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.9);
}
.float-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* =========================================================================
   14b. EFECTO CINEMATOGRÁFICO "BORDER BEAM" (luz continua en el borde)
   CSS puro con aceleración por hardware (transform/opacity + @property),
   ultra fluido en celulares al no depender de repintados de layout.
   ========================================================================= */
@property --angulo-beam {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* [CORRECCIÓN CRÍTICA]: .flip-card-front y .flip-card-back YA tienen "position: absolute"
   (necesario para el giro 3D) y .gallery-item/.video-item/.antes-despues YA tienen
   "position: relative" definidos más arriba en este archivo. Aquí solo se agrega el
   contexto de apilamiento (isolation), sin tocar su "position" para no descuadrar
   el grid ni romper la animación de giro. */
.flip-card-front,
.flip-card-back,
.gallery-item,
.video-item,
.antes-despues {
  isolation: isolate;
}
/* Estos dos SÍ necesitan position:relative porque no lo tenían definido antes */
.contacto-form-box,
.contacto-datos {
  position: relative;
  isolation: isolate;
}

.flip-card-front::after,
.flip-card-back::after,
.gallery-item::after,
.video-item::after,
.antes-despues::after,
.contacto-form-box::after,
.contacto-datos::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angulo-beam),
    transparent 0%,
    transparent 72%,
    var(--color-blanco) 82%,
    var(--color-principal) 90%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: girar-border-beam 4.5s linear infinite;
  pointer-events: none;
  z-index: 6;
  will-change: transform;
}
/* El video ya tiene su propio ::after implícito vía overflow:hidden en su contenedor,
   por lo que el beam se recorta automáticamente al radio de la tarjeta */
@keyframes girar-border-beam {
  to { --angulo-beam: 360deg; }
}
/* Respeta accesibilidad: sin animación para quienes prefieren movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .flip-card-front::after,
  .flip-card-back::after,
  .gallery-item::after,
  .video-item::after,
  .antes-despues::after,
  .contacto-form-box::after,
  .contacto-datos::after {
    animation: none;
  }
}

/* =========================================================================
   15. PÁGINA DE CONTACTO
   ========================================================================= */
/* [MEJORA PASO 4]: Ajuste de padding-top y posición relativa para evitar superposición del header fijo */
.page-header {
  position: relative;
  z-index: 10;
  padding: calc(var(--alto-header) + 65px) 0 55px; /* Altura óptima que garantiza visibilidad total del título */
  background-color: var(--color-acento);
  text-align: center;
}
.page-header h1 {
  font-family: var(--fuente-titulos);
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  color: var(--color-secundario);
}
.page-header p {
  color: var(--color-texto-suave);
  max-width: 640px;
  margin: 12px auto 0;
}
.contacto-wrapper-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.contacto-form-box, .contacto-datos {
  background-color: var(--color-blanco);
  border: 1px solid rgba(232, 169, 212, 0.35);
  border-radius: var(--radio);
  box-shadow: var(--sombra-premium);
  padding: 35px 30px;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.contacto-form-box:hover, .contacto-datos:hover {
  border-color: var(--color-principal);
  box-shadow: var(--sombra-hover);
}
.contacto-form-box h2, .contacto-datos h2 {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.contacto-form-box > p, .contacto-datos > p {
  color: var(--color-texto-suave);
  font-size: 0.95rem;
  margin-bottom: 22px;
}
.form-grupo { margin-bottom: 18px; }
.form-grupo label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  color: var(--color-secundario);
  background-color: var(--color-gris-claro);
  border: 1px solid rgba(125, 78, 104, 0.18);
  border-radius: 10px;
  transition: var(--transicion);
}
.form-grupo textarea { resize: vertical; min-height: 120px; }
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  outline: none;
  border-color: var(--color-principal);
  background-color: var(--color-blanco);
  box-shadow: 0 0 0 3px rgba(232, 169, 212, 0.2);
}
.form-grupo .error-msg {
  display: none;
  color: #c0392b;
  font-size: 0.82rem;
  margin-top: 6px;
}
.form-grupo.con-error input,
.form-grupo.con-error select,
.form-grupo.con-error textarea {
  border-color: #c0392b;
}
.form-grupo.con-error .error-msg { display: block; }
.form-aviso {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  background-color: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.4);
  color: #1e7a45;
}
.form-aviso.visible { display: block; }
.datos-lista li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.datos-lista i {
  color: var(--color-principal);
  font-size: 1.05rem;
  margin-top: 4px;
  width: 20px;
  text-align: center;
}
.datos-lista a:hover { color: var(--color-principal); }
.map-container-box {
  width: 100%;
  height: 340px;
  margin-top: 25px;
  border-radius: var(--radio);
  overflow: hidden;
  border: 2px solid var(--color-acento);
  box-shadow: var(--sombra-premium);
}
.map-container-box iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
}
.btn-mapa {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  background-color: var(--color-secundario);
  color: var(--color-blanco);
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: var(--transicion);
}
.btn-mapa:hover {
  background-color: var(--color-principal);
  transform: translateY(-3px);
}

/* =========================================================================
   16. RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .footer-columns-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 992px) {
  :root { --alto-header: 80px; }

  .menu-toggle { display: block; }
  .header-redes { display: none; }

  .nav {
    position: fixed;
    top: var(--alto-header);
    left: -100%;
    width: 100%;
    height: calc(100vh - var(--alto-header));
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(232, 169, 212, 0.25);
    overflow-y: auto;
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav.active { left: 0; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    padding: 25px 20px 60px;
    gap: 6px;
  }
  .nav ul li { width: 100%; }
  .nav ul li a { display: block; font-size: 1.08rem; padding: 13px 14px; }
  .nav ul li a:hover { background-color: rgba(232, 169, 212, 0.14); }

  .nav .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 0;
    overflow: hidden;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: rgba(232, 169, 212, 0.1);
    border-radius: 10px;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .dropdown.is-open .dropdown-menu {
    max-height: 460px;
    padding: 8px 0;
    transform: none;
  }
  .nav .dropdown-menu li a { padding-left: 32px; font-size: 0.95rem; }
  .nav .dropdown-menu li a:hover { padding-left: 38px; }

  .nav-redes-movil {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 25px 0 0;
    margin-top: 18px;
    border-top: 1px solid rgba(232, 169, 212, 0.3);
  }
  .nav-redes-movil a {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-acento);
    color: var(--color-secundario);
    font-size: 1.15rem;
  }

  .contacto-wrapper-grid { grid-template-columns: 1fr; }
  .about-container { flex-direction: column; text-align: center; }
  .perfil-card { flex: 0 0 auto; width: 100%; max-width: 320px; height: 400px; }
  .service-image { height: 280px; }
  .flip-card { height: 340px; }
}

@media (max-width: 768px) {
  /* [MEJORA - LOGOS UNIFICADOS]: header y footer se reducen de forma homogénea a 65px en móvil */
  .logo-img { height: 65px; }
  .header.scrolled .logo-img { height: 65px; }
  .logo-text { font-size: 1.25rem; }
  .logo-text span { font-size: 0.9rem; }
  .footer-logo { height: 65px; margin-bottom: 12px; }

  .section { padding: 55px 0; }
  .section-title { font-size: 1.9rem; }

  /* [MEJORA - FOOTER COMPACTO]: paddings y márgenes verticales reducidos para evitar scroll largo */
  .footer { padding: 32px 0 16px; }
  .footer-columns-grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 22px; }
  .footer-col h3 { margin-bottom: 10px; font-size: 1.05rem; }
  .footer-menu li { margin-bottom: 6px; }
  .footer-menu a { font-size: 0.88rem; }
  .footer-brand p { font-size: 0.88rem; line-height: 1.5; }
  .footer-siguenos-titulo { margin: 12px 0 8px; }
  .footer-social-icons a { width: 38px; height: 38px; font-size: 0.95rem; }
  .footer-bottom { justify-content: center; text-align: center; padding-top: 14px; gap: 6px; font-size: 0.8rem; }
  .footer-bottom nav { gap: 14px; }

  .contacto-form-box, .contacto-datos { padding: 26px 20px; }
  .scroll-buttons-container { right: 16px; bottom: 16px; gap: 12px; }
  .btn-float { width: 48px; height: 48px; font-size: 1.25rem; }
  .float-whatsapp { font-size: 1.5rem; }

  .videos-grid { gap: 16px; }
  .video-item { flex: 0 0 200px; height: 360px; }
  .ad-slider { height: 400px; }

  /* Ajustes de página de detalle en móvil */
  .service-detail { padding: calc(var(--alto-header) + 40px) 0 60px; }
  .service-image { height: 220px; max-width: 100%; }
  .service-header h1 { font-size: 1.6rem; }
  .service-description { font-size: 0.98rem; }
  .service-description h2 { font-size: 1.3rem; margin-top: 28px; }
  .otros-servicios-lista a { padding: 8px 16px; font-size: 0.85rem; }
}
.about-logo-img {
    width: 95%;
    max-width: 270px;
    height: auto;
    margin: 25px auto 0 auto;
    display: block;
    object-fit: contain; /* Controla exclusivamente el logo dorado */
    transition: transform 1.2s ease-in-out;
}

/* Efecto hover exclusivo para el logo de la fundadora */
.flip-card:hover .about-logo-img {
    transform: scale(1.12);
}
/* =========================================================================
   Ajuste exclusivo para videos de la sección Nuestros Reels
   ========================================================================= */
.videos-grid .video-item video {
    object-fit: contain;     /* Muestra el logo completo sin recortarlo */
    background-color: #000;  /* Mantiene el fondo negro estético de la tarjeta */
}
/* =========================================================================
   CAMBIO DE COLORES SIN ALTERAR EL FONDO ORIGINAL DEL BANNER
   ========================================================================= */

/* Título principal en un tono Palo de Rosa profundo y legible */
.hero h1 {
  color: #61354c !important; /* Palo de rosa oscuro de alta visibilidad */
  text-shadow: 0px 2px 4px rgba(125, 78, 104, 0.15);
}

/* Segunda línea del título en un degradado Dorado Oro Metálico */
.hero h1 span {
  background: linear-gradient(135deg, #bd913c 0%, #e3ba64 50%, #997123 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.1));
  display: block; /* Mantiene la separación de línea original */
}

/* Párrafo descriptivo más oscuro para un contraste óptimo */
.hero p {
  color: #2e2e2e !important; 
  font-weight: 600;
}
/* =========================================================================
   CASILLA DE ACEPTACIÓN DE TÉRMINOS
   ========================================================================= */
.form-checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0;
  text-align: left;
}

.form-checkbox-group input[type="checkbox"] {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #e8a9d4; /* Color rosado de tu marca */
}

.form-checkbox-group label {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
  cursor: pointer;
}

.form-checkbox-group label a {
  color: #7d4e68; /* Color secundario de tu marca */
  text-decoration: underline;
  font-weight: 600;
}

.form-checkbox-group label a:hover {
  color: #e8a9d4;
}