/* ========================================
   styles.css — Consulta Psiquiatría
   Consolidado (sin duplicaciones)
   ======================================== */

/* --- Base --- */
:root { --header-offset: 6.5rem; --navy-900: #0f2a6b; --orange-600: #ea580c; }
body { font-family: 'Lato', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .font-heading { font-family: 'Montserrat', sans-serif; }
html { font-size: 18px; }
main { overflow: hidden; }
a { text-decoration: none; word-break: normal; }
section[id] { scroll-margin-top: var(--header-offset); }

/* --- Scrollbar oculto --- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Tipografía global desktop --- */
@media (min-width: 768px) { html { font-size: 19px; } }

/* --- Componentes reutilizables --- */
.soft-card {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,250,252,.98));
  border: 1px solid rgba(226,232,240,.9);
  box-shadow: 0 16px 40px rgba(15,42,107,.06);
}
.section-eyebrow { letter-spacing:.14em; text-transform:uppercase; font-size:.85rem; font-weight:900; color: var(--orange-600); }
.section-intro { color:#475569; font-weight:600; line-height:1.7; max-width:60rem; }
.section-intro strong { color: var(--navy-900); }
.content-measure { max-width: 72ch; }
.soft-divider { height:1px; background:linear-gradient(90deg, rgba(226,232,240,0), rgba(226,232,240,.95), rgba(226,232,240,0)); }

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem;
  border-radius:9999px; background:#fff; border:1px solid rgba(226,232,240,.95);
  font-size:.78rem; font-weight:900; letter-spacing:.02em; color: var(--navy-900);
  box-shadow:0 8px 22px rgba(15,42,107,.04);
}
.chip-trust {
  display:inline-flex; align-items:center; gap:.55rem;
  background:rgba(255,255,255,.82); border:1px solid rgba(226,232,240,.95);
  color: var(--navy-900); padding:.8rem 1rem; border-radius:9999px;
  font-weight:800; box-shadow:0 6px 22px rgba(15,42,107,.05);
}
.trust-chip {
  display:inline-flex; align-items:center; gap:.42rem; padding:.58rem .82rem;
  border-radius:9999px; background:#fff; border:1px solid rgba(226,232,240,.95);
  box-shadow:0 6px 18px rgba(15,42,107,.04); font-weight:800; color: var(--navy-900); font-size:.82rem;
}
.cta-inline { display:inline-flex; align-items:center; gap:.55rem; font-weight:900; color: var(--navy-900); }
.cta-inline:hover { color: var(--orange-600); }
.bg-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }

/* --- Hover / Lift --- */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,42,107,.08); }

/* --- Focus visible (accesibilidad) --- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid rgba(234,88,12,.35);
  outline-offset: 3px;
}

/* --- Imágenes patologías --- */
.pathology-img { filter: grayscale(35%); transition: all 0.5s ease; transform: scale(1); }
.group:hover .pathology-img { filter: grayscale(0%); transform: scale(1.04); }
.pathology-question-link { color: #c2410c; }
.pathology-question-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Mini header sticky --- */
#miniHeader { transform: translateY(-120%); transition: transform 0.35s cubic-bezier(.4,0,.2,1); position:fixed; top:0; left:0; right:0; z-index:60; }
#miniHeader.visible { transform: translateY(0); }
#miniHeader .font-heading { color: var(--navy-900); }
#miniHeader a { font-size:.78rem; }
#miniHeader img { display:block; }

/* --- Navbar --- */
.nav-link.active { background-color: var(--navy-900) !important; color: #fff !important; }

/* --- Carrusel dots --- */
.c-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:all .3s ease; cursor:pointer; border:none; padding:0; }
.c-dot.active { width:24px; border-radius:4px; background:#fff; }

/* --- FAQ accordion --- */
.faq-body { max-height:0; overflow:hidden; transition:max-height .4s ease; }
.faq-body.open { max-height:500px; }
.faq-icon { transition:transform .3s ease; display:inline-block; }
.faq-icon.open { transform:rotate(180deg); }
.faq-q { scroll-margin-top: 6rem; }

/* --- Skip nav (accesibilidad) --- */
.skip-nav { position:absolute; left:-9999px; top:4px; z-index:9999; background: var(--navy-900); color:#fff; padding:8px 16px; border-radius:4px; font-weight:700; text-decoration:none; }
.skip-nav:focus { left:4px; }

/* --- Contadores animados --- */
.count-animated { transition:color .3s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.stat-card { opacity:1; }

/* --- Copiar al portapapeles --- */
.copy-ok { color: #16a34a !important; }

/* --- Telemedicina steps --- */
.tele-step { transition: transform .3s ease, box-shadow .3s ease; }

/* --- Ticker --- */
#tickerContent { will-change:transform; }
#tickerContent:hover { animation-play-state: paused; }

/* --- Secciones de texto --- */
#sesiones .prose p { margin-bottom:1rem; }
#quien-es .space-y-4 p, #sesiones .prose p, #screenings-referenciales p, #faq p { overflow-wrap:anywhere; }

/* --- Hero KPIs --- */
.hero-kpis { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top:1rem; }
.hero-kpis span {
  display:inline-flex; align-items:center; gap:.38rem; padding:.55rem .82rem; border-radius:9999px;
  background:rgba(255,255,255,.92); border:1px solid rgba(226,232,240,.9); color: var(--navy-900);
  font-weight:800; box-shadow:0 6px 18px rgba(15,42,107,.04); font-size:.82rem; line-height:1.15;
}

/* --- Floating dock (desktop) --- */
.floating-dock {
  position:fixed; z-index:70;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px);
  border:1px solid rgba(226,232,240,.9); box-shadow:0 18px 50px rgba(15,42,107,.12);
  padding:.45rem; max-width:calc(100vw - 2rem);
}
.floating-dock-left {
  left:14px;
  bottom:14px;
  border-radius:1.4rem;
}
.floating-dock-right {
  right:14px;
  bottom:14px;
  border-radius:9999px;
}
.floating-dock a {
  display:inline-flex; align-items:center; gap:.5rem; padding:.82rem .95rem;
  border-radius:9999px; font-weight:900;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.floating-dock a:hover { transform: translateY(-1px); }
.floating-dock a:focus-visible { outline: 3px solid rgba(234,88,12,.28); outline-offset: 3px; }
/* --- Floating dock buttons (desktop) — cada canal con identidad visual propia --- */
.floating-dock a.dock-reservar { background: var(--orange-600); color:#fff; }
.floating-dock a.dock-reservar:hover { background:#c2410c; }
.floating-dock a.dock-whatsapp { background:#22c55e; color:#fff; }
.floating-dock a.dock-whatsapp:hover { background:#16a34a; }
.floating-dock a.dock-email { background: var(--navy-900); color:#fff; }
.floating-dock a.dock-email:hover { background:#153e75; }
.floating-dock a.dock-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color:#fff; }
.floating-dock a.dock-instagram:hover { opacity:.9; }

/* --- Mobile action bar buttons — diferenciados --- */
.mobile-action-bar a.mob-reservar { background: var(--orange-600); color:#fff; }
.mobile-action-bar a.mob-whatsapp { background:#22c55e; color:#fff; }
.mobile-action-bar a.mob-email { background:#f8fafc; color: var(--navy-900); border:1px solid rgba(226,232,240,.95); }
.mobile-action-bar a.mob-instagram { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); color:#fff; }

/* --- Mobile action bar --- */
.mobile-action-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.4rem;
  padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
  border-top:1px solid rgba(226,232,240,.95); box-shadow:0 -10px 30px rgba(15,42,107,.08);
}
.mobile-action-bar a.mob-reservar {
  grid-column: 1 / -1;
  flex-direction: row; gap:.5rem;
  padding:.75rem; border-radius:1rem;
  font-size:.85rem; font-weight:900;
  background: var(--orange-600); color:#fff;
  box-shadow: 0 4px 14px rgba(234,88,12,.3);
  justify-content: center;
}
.mobile-action-bar a {
  min-width:0; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; padding:.72rem .35rem; border-radius:1rem; font-weight:900; font-size:.72rem;
  white-space:nowrap; line-height:1.1; text-align:center;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.mobile-action-bar a:hover { transform: translateY(-1px); }
.mobile-action-bar a:focus-visible { outline: 3px solid rgba(234,88,12,.28); outline-offset: 3px; }
.mobile-action-bar a:active { transform: translateY(1px); }
.mobile-action-bar a.primary { background: var(--orange-600); color:#fff; }
.mobile-action-bar a.secondary { background:#f8fafc; color: var(--navy-900); border:1px solid rgba(226,232,240,.95); }

/* --- Scope cards (alcance de atención) --- */
.scope-grid { display:grid; gap:1rem; }
.scope-card {
  background: rgba(255,255,255,.96); border: 1px solid rgba(226,232,240,.95);
  border-radius: 1.75rem; padding: 1.4rem; box-shadow: 0 10px 28px rgba(15,42,107,.05);
}
.scope-card h3 { color: var(--navy-900); font-weight:900; margin-bottom:.6rem; font-size:1.05rem; }
.scope-card p { color:#475569; line-height:1.7; font-weight:600; }

/* --- Screening cards --- */
.screening-card-clickable { cursor:pointer; }
.screening-card-clickable:hover { border-color: rgba(59,130,246,.28) !important; box-shadow:0 16px 36px rgba(15,42,107,.08); transform: translateY(-2px); }

/* --- Pathology cards --- */
.card-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,252,.99));
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 2rem;
  box-shadow: 0 8px 30px rgba(15,42,107,.05);
}
.card-surface:hover { border-color: rgba(59,130,246,.2); box-shadow: 0 16px 40px rgba(15,42,107,.09); }

/* --- FAQ container hover --- */
#faqList > div { transition: border-color .2s ease, box-shadow .2s ease; }
#faqList > div:hover { border-color: rgba(59,130,246,.25); box-shadow: 0 6px 20px rgba(15,42,107,.06); }

/* --- Footer --- */
.footer-links-strong a { color:#334155; }
.footer-links-strong a:hover { color: var(--orange-600); }

/* --- Enlaces de interés cards — hover mejorado --- */
#enlaces-interes .grid > a { transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; }
#enlaces-interes .grid > a:hover { box-shadow: 0 24px 50px rgba(0,0,0,.25); filter: brightness(1.08); }

/* ========================================
   Contraste WCAG mejorado
   ======================================== */
footer .text-slate-300 { color: #cbd5e1 !important; }

/* ========================================
   Responsive — Mobile
   ======================================== */
@media (max-width: 767px) {
  :root { --header-offset: 5.5rem; }
  html { font-size: 17px; }
  main { padding-bottom: 8rem !important; }
  .content-measure { max-width: 100%; }
  .section-intro { font-size: 1rem; }
  .floating-dock { display:none !important; }
  .hero-kpis { justify-content:flex-start; }
  .hero-kpis span { width:100%; justify-content:flex-start; }
  .mobile-action-bar a span.label-short { display:none; }
  .mobile-action-bar a span.label-full { display:inline; }
  .mobile-action-bar i { flex: 0 0 auto; }
  #navLinks { padding-bottom: .1rem; }
  #miniHeader .container { gap:.5rem; }
  #miniHeader .font-heading { font-size:.82rem; }
  header .container { align-items:center; }
  header .w-36, header .w-44 { margin-inline:auto; }
  .floating-dock-left, .floating-dock-right { display:none !important; }
  #como-funciona .grid > div, #sesiones .flex, #quien-es .grid, #acreditaciones .flex, #screenings-referenciales .grid, #patologias article { min-width:0; }
  #como-funciona p, #como-funciona h3, #quien-es p, #sesiones p, #screenings-referenciales p { word-break:break-word; overflow-wrap:anywhere; }
  #patologias article .min-w-0 { min-width:0; }
  /* Solicitudes: no grayscale en mobile (no hay hover) */
  #requestsGrid img { filter: none !important; }
}

/* Responsive — Tablet+ */
@media (min-width: 768px) {
  .mobile-action-bar { display:none !important; }
  .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========================================
   Print
   ======================================== */
@media print {
  #miniHeader, .fixed, nav, footer, #imageModal, .floating-dock, .trust-strip, .mobile-action-bar { display:none !important; }
  main { box-shadow:none !important; border-radius:0 !important; margin:0 !important; }
  .hover-lift:hover { transform:none !important; box-shadow:none !important; }
}

/* ========================================
   Reduced motion (accesibilidad)
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ========================================
   Cookie Consent Banner
   ======================================== */
.cookie-consent {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:100;
  padding:.75rem 1rem; background:rgba(15,42,107,.97); backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.1); align-items:center; justify-content:center;
}
.cookie-consent-inner {
  max-width:1100px; width:100%; display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:.75rem;
}
.cookie-consent-text { color:#e2e8f0; font-size:.82rem; font-weight:600; flex:1; min-width:240px; text-align:center; }
.cookie-consent-actions { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.cookie-btn-accept {
  background:#ea580c; color:#fff; border:none; padding:.5rem 1.2rem; border-radius:9999px;
  font-weight:900; font-size:.78rem; cursor:pointer; transition:background .2s;
}
.cookie-btn-accept:hover { background:#c2410c; }
.cookie-btn-reject {
  background:transparent; color:#94a3b8; border:1px solid rgba(148,163,184,.3); padding:.5rem 1.2rem;
  border-radius:9999px; font-weight:700; font-size:.78rem; cursor:pointer; transition:all .2s;
}
.cookie-btn-reject:hover { color:#fff; border-color:rgba(255,255,255,.4); }
.cookie-link { color:#93c5fd; font-size:.75rem; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.cookie-link:hover { color:#fff; }

/* ========================================
   Skeleton Loading
   ======================================== */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease infinite;
  border-radius: 1rem;
}