/* =========================================================
   CLÍNICA VITALIS — Hoja de estilos principal
   Sistema de diseño:
   - Color primario:  #0F6E7A (teal clínico profundo)
   - Color secundario:#123B4F (azul noche, texto)
   - Acento:          #FF6F59 (coral cálido, CTAs)
   - Fondo suave:      #EAF6F3 (menta pálido)
   - Fondo base:       #FBFBF8 (blanco cálido)
   Tipografía:
   - Display: 'Fraunces' (serif con carácter, títulos)
   - Cuerpo:  'Manrope' (sans limpia, textos)
   Firma visual: la "línea de pulso" (EKG) como divisor entre secciones
   ========================================================= */

:root{
  --color-primary: #0F6E7A;
  --color-primary-dark: #0A4E57;
  --color-secondary: #123B4F;
  --color-accent: #FF6F59;
  --color-accent-dark: #E5573F;
  --color-soft: #EAF6F3;
  --color-base: #FBFBF8;
  --color-line: #D9E7E4;
  --font-display: 'Fraunces', serif;
  --font-body: 'Manrope', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--color-secondary);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.font-display{ font-family: var(--font-display); }

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Foco visible para accesibilidad */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Utilidades de color (por si Tailwind CDN no resuelve custom colors) ---------- */
.bg-primary{ background-color: var(--color-primary); }
.bg-primary-dark{ background-color: var(--color-primary-dark); }
.bg-soft{ background-color: var(--color-soft); }
.bg-accent{ background-color: var(--color-accent); }
.text-primary{ color: var(--color-primary); }
.text-secondary{ color: var(--color-secondary); }
.text-accent{ color: var(--color-accent); }
.border-primary{ border-color: var(--color-primary); }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-accent{
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(255,111,89,.55);
}
.btn-accent:hover{ background: var(--color-accent-dark); }
.btn-outline{
  border: 1.5px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.btn-outline:hover{ background: var(--color-primary); color:#fff; }
.btn-ghost-light{
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff;
}
.btn-ghost-light:hover{ background: rgba(255,255,255,.15); }

/* ---------- Header ---------- */
#site-header{
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
#site-header.scrolled{
  box-shadow: 0 6px 24px -12px rgba(18,59,79,.25);
}
.nav-link{
  position: relative;
  font-weight: 600;
  color: var(--color-secondary);
}
.nav-link::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:2px;
  background: var(--color-accent);
  transition: width .25s ease;
}
.nav-link:hover::after{ width:100%; }

/* ---------- Blobs orgánicos detrás de fotos ---------- */
.blob-shape{
  border-radius: 62% 38% 55% 45% / 48% 42% 58% 52%;
  overflow: hidden;
}
.blob-behind{
  position:absolute;
  inset:0;
  border-radius: 62% 38% 55% 45% / 48% 42% 58% 52%;
  z-index: -1;
  transform: scale(1.08) rotate(-4deg);
}

/* ---------- Firma visual: línea de pulso (EKG) como divisor ---------- */
.pulse-divider{
  width: 100%;
  height: 40px;
  display:block;
  color: var(--color-primary);
  opacity: .55;
}
.pulse-line-path{
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-pulse 2.4s ease forwards;
}
@keyframes draw-pulse{
  to{ stroke-dashoffset: 0; }
}

/* ---------- Tarjetas ---------- */
.card{
  background:#fff;
  border-radius: 22px;
  border: 1px solid var(--color-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(18,59,79,.25);
}

/* ---------- Icono lineal contenedor ---------- */
.icon-circle{
  width: 60px; height: 60px;
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--color-soft);
  color: var(--color-primary);
  flex-shrink: 0;
}

/* ---------- Hero ---------- */
.hero-title{
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.05;
}
.hero-title em{
  font-style: italic;
  color: var(--color-primary);
}

/* ---------- Departamentos: tarjeta grande con imagen de fondo ---------- */
.dept-card{
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 320px;
  display:flex;
  align-items:flex-end;
  isolation: isolate;
}
.dept-card::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(18,59,79,0) 30%, rgba(10,32,42,.88) 100%);
  z-index: 1;
}
.dept-card .dept-content{ position:relative; z-index:2; }
.dept-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.dept-card:hover img{ transform: scale(1.07); }

/* ---------- Testimonios ---------- */
.testimonial-track{
  display:flex;
  transition: transform .5s ease;
}
.testimonial-slide{
  flex: 0 0 100%;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--color-line);
  transition: background .25s ease, transform .25s ease;
}
.dot.active{ background: var(--color-accent); transform: scale(1.2); }

/* ---------- Acordeón FAQ ---------- */
.accordion-item{
  border-bottom: 1px solid var(--color-line);
}
.accordion-trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.25rem 0;
  text-align:left;
  font-weight:700;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-secondary);
}
.accordion-icon{ transition: transform .3s ease; flex-shrink:0; }
.accordion-item.open .accordion-icon{ transform: rotate(45deg); }
.accordion-panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
.accordion-item.open .accordion-panel{ max-height: 400px; }

/* ---------- Botón flotante WhatsApp / Agendar ---------- */
.floating-cta{
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  box-shadow: 0 12px 28px -8px rgba(15,110,122,.55);
}

/* ---------- Scroll reveal ligero (sin dependencias) ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].revealed{
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Sticky sub-menu doctor / horario tabla ---------- */
.schedule-row:nth-child(odd){ background: var(--color-soft); }

/* ---------- Formularios ---------- */
.form-field label{
  font-weight:700;
  font-size:.85rem;
  color: var(--color-secondary);
  display:block;
  margin-bottom:.35rem;
}
.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  border:1.5px solid var(--color-line);
  border-radius: 12px;
  padding: .75rem 1rem;
  font-family: var(--font-body);
  background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(15,110,122,.12);
  outline: none;
}
.form-field .error-msg{
  color: var(--color-accent-dark);
  font-size: .8rem;
  margin-top: .3rem;
  display:none;
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea{
  border-color: var(--color-accent-dark);
}
.form-field.has-error .error-msg{ display:block; }

/* ---------- Utilidad: fondo con textura punteada médica sutil ---------- */
.dotted-bg{
  background-image: radial-gradient(var(--color-line) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}