/* ==========================================================
   Cristian Páez · capa "premium" sobre la plantilla
   Se carga después de main.css: solo refina, no reemplaza.
   Paleta: carbón #232120 · dorado #c1a356
   ========================================================== */
:root {
  --cp-gold: #c1a356;
  --cp-gold-2: #d6bb74;
  --cp-gold-3: #b0944c;
  --cp-ink: #232120;
  --cp-ink-2: #1a1715;
  --cp-line: rgba(193, 163, 86, .22);
  --cp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Preloader: sello del estudio con aro dorado ---------- */
#preloader {
  background:
    radial-gradient(600px 400px at 50% 45%, rgba(193, 163, 86, .10), transparent 70%),
    var(--cp-ink-2);
  transition: opacity .6s var(--cp-ease), visibility .6s;
}
/* aro: fino, dorado, con una "cola" que se desvanece */
#preloader:before {
  top: calc(50% - 74px);
  left: calc(50% - 74px);
  width: 148px;
  height: 148px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(193, 163, 86, .15) 70%, var(--cp-gold) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: cp-giro 1.15s linear infinite;
}
/* sello del estudio, respirando */
#preloader:after {
  content: "";
  position: fixed;
  top: calc(50% - 56px);
  left: calc(50% - 56px);
  width: 112px;
  height: 112px;
  background: url("../img/log4.png") center / contain no-repeat;
  animation: cp-respira 1.8s ease-in-out infinite;
}
#preloader.cp-salida { opacity: 0; visibility: hidden; }
@keyframes cp-giro { to { transform: rotate(360deg); } }
@keyframes cp-respira {
  0%, 100% { transform: scale(.94); opacity: .82; }
  50%      { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #preloader:before, #preloader:after { animation: none; }
}

/* ---------- Botón flotante de WhatsApp: mismo tamaño que el asistente ---------- */
.scroll-top {
  width: 60px;
  height: 60px;
  right: 18px;
  bottom: 18px;
  background: radial-gradient(circle at 30% 30%, #4fe08a 0%, #25d366 45%, #1aa851 100%);
  border: 1.5px solid rgba(255, 255, 255, .28);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .45), 0 0 0 4px rgba(37, 211, 102, .14);
}
.scroll-top i { font-size: 29px; line-height: 1; }
.scroll-top:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .5), 0 0 0 5px rgba(37, 211, 102, .2);
}

/* ---------- Secciones: aire, profundidad y filetes dorados ---------- */
.section { position: relative; }
/* filete dorado que se desvanece entre secciones */
main > section.section:not(.hero):not(.d-none) + section.section:not(.d-none)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(720px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-line), transparent);
}
/* brillo dorado muy tenue detrás de cada sección */
#about, #services, #faq, #contact {
  background-image: radial-gradient(ellipse 75% 520px at 50% 0%, rgba(193, 163, 86, .05), transparent 100%);
}

/* Títulos: subtítulo con rombo dorado */
.section-title .subtitle {
  letter-spacing: 4px;
  font-size: .78rem;
  color: rgba(255, 255, 255, .78);
}
.section-title .subtitle::after {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-gold), transparent);
}
.section-title .subtitle::before {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 50%;
  width: 7px;
  height: 7px;
  background: var(--cp-gold);
  transform: translateX(-50%) rotate(45deg);
}
.section-title h2 { letter-spacing: -.5px; }
.section-title h2 strong { font-weight: inherit; }

/* ---------- About: foto del Dr. con marco dorado ---------- */
.about .image-wrapper { padding-left: 2.5rem; }
.about .image-wrapper::before {         /* marco desplazado, detrás de la foto */
  content: "";
  position: absolute;
  top: -18px;
  right: -18px;
  width: 70%;
  height: 70%;
  border: 1px solid var(--cp-line);
  border-radius: 14px;
  pointer-events: none;
}
.about .image-wrapper img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.about .image-wrapper .floating-element {
  bottom: 1.75rem;          /* adentro de la sección: antes sobresalía y quedaba cortada */
  left: 0;
  background: rgba(26, 23, 21, .92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid var(--cp-line);
  border-top: 2px solid var(--cp-gold);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.about .image-wrapper .floating-element .quote-content blockquote {
  color: rgba(255, 255, 255, .9);
  font-size: 1.02rem;
}
.about .image-wrapper .floating-element .quote-content cite { color: var(--cp-gold); }
.about .stats-wrapper .stat-item .number {
  background: linear-gradient(180deg, var(--cp-gold-2), var(--cp-gold-3));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 992px) {
  .about .image-wrapper { padding-left: 0; }
  .about .image-wrapper::before { display: none; }
}

/* ---------- Servicios: cards más finas ---------- */
.services .service-item {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f2 100%);
  border: 1px solid rgba(193, 163, 86, .18);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .45s var(--cp-ease), box-shadow .45s var(--cp-ease), border-color .45s;
}
.services .service-item::before {        /* filete dorado arriba en vez de al costado */
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--cp-gold-3), var(--cp-gold-2), var(--cp-gold-3));
  transform: scaleX(0);
  transform-origin: left;
}
.services .service-item:hover {
  transform: translateY(-6px);
  border-color: rgba(193, 163, 86, .45);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .45), 0 0 0 1px rgba(193, 163, 86, .25);
}
.services .service-item:hover::before { transform: scaleX(1); }
.services .service-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf8, #f2ebdd);
  box-shadow: inset 0 0 0 1px rgba(193, 163, 86, .45), 0 8px 18px rgba(176, 148, 76, .18);
}
.services .service-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  mix-blend-mode: multiply;   /* algunos íconos traen fondo blanco: así no se nota el recuadro */
}
.services .service-item:hover .service-icon {   /* sin el giro 3D de la plantilla */
  transform: none;
  background: radial-gradient(circle at 35% 30%, #fffdf8, #efe3c8);
  box-shadow: inset 0 0 0 1.5px var(--cp-gold), 0 10px 22px rgba(176, 148, 76, .3);
}
.services .service-content h3 { letter-spacing: -.2px; }
.services .service-content h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: .6rem;
  background: var(--cp-gold);
  transition: width .45s var(--cp-ease);
}
.services .service-item:hover .service-content h3::after { width: 64px; }
.services .service-link {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .92rem;
  background: var(--cp-ink);
  color: #fff;
  border: 1px solid var(--cp-ink);
  transition: background .3s, color .3s, border-color .3s;
}
.services .service-link i { color: var(--cp-gold); transition: transform .3s ease, color .3s; }
.services .service-link:hover {
  background: var(--cp-gold);
  border-color: var(--cp-gold);
  color: var(--cp-ink);
}
.services .service-link:hover i { color: var(--cp-ink); }

/* ---------- Preguntas frecuentes ---------- */
.faq .faq-item {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  border-bottom: 1px solid rgba(193, 163, 86, .14);
  transition: background .3s;
  border-radius: 10px;
}
.faq .faq-item:hover { background: rgba(193, 163, 86, .04); }
.faq .faq-item.faq-active {
  background: linear-gradient(90deg, rgba(193, 163, 86, .07), transparent 70%);
  box-shadow: inset 2px 0 0 var(--cp-gold);
}

/* ---------- Contacto ---------- */
.contact .contact-sidebar {
  border: 1px solid var(--cp-line);
  border-top: 2px solid var(--cp-gold);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.contact .contact-method .contact-icon {
  border: 1px solid var(--cp-line);
  border-radius: 50%;
  background: rgba(193, 163, 86, .06);
}
.contact input:focus,
.contact textarea:focus { border-color: var(--cp-gold) !important; box-shadow: none; }
.contact iframe { border-radius: 14px; filter: grayscale(.35) contrast(1.05); }

/* ---------- Footer: filete dorado arriba ---------- */
.footer { position: relative; }
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-gold), transparent);
  opacity: .6;
}

/* ---------- Detalles generales ---------- */
::selection { background: rgba(193, 163, 86, .35); color: #fff; }
html { scrollbar-color: var(--cp-gold-3) var(--cp-ink-2); }