/* Tema de Family Dental — cálido y editorial.
   Los colores salen del ERP (Sitio web → Ajustes → Colores y tipografía): view/erp.php imprime las variables --fd-* justo después de este archivo.
   Los valores de aquí son solo respaldo. El ERP no deja guardar combinaciones con contraste menor a 4.5:1 (WCAG AA).
   Convención: .bg-primary = color principal (frambuesa) · .text-primary y los íconos = color de acento (verde azulado) · .bg-secondary = acento. */

:root {
  --fd-primary: #B8175D; --fd-primary-rgb: 184,23,93; --fd-primary-dark: #8F1048;
  --fd-accent: #0A7C82; --fd-accent-rgb: 10,124,130;
  --fd-ink: #1B1530; --fd-ink-rgb: 27,21,48;
  --fd-surface: #FFFFFF; --fd-surface-alt: #FFF4F8; --fd-on-primary: #FFFFFF;
  --fd-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --fd-font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fd-radius: 20px; --fd-radius-sm: 12px;
  --fd-shadow-1: 0 1px 2px rgba(var(--fd-ink-rgb), .06), 0 8px 24px rgba(var(--fd-ink-rgb), .07);
  --fd-shadow-2: 0 2px 4px rgba(var(--fd-ink-rgb), .08), 0 20px 44px rgba(var(--fd-ink-rgb), .14);
  /* compatibilidad con la plantilla anterior */
  --primary: var(--fd-primary); --secondary: var(--fd-accent); --light: var(--fd-surface-alt); --dark: var(--fd-ink);
}
body.fd-font-clasica { --fd-font-head: "Jost", system-ui, sans-serif; --fd-font-body: "Open Sans", system-ui, sans-serif; }

/* ───── base ───── */
html { scroll-behavior: smooth; }
body { font-family: var(--fd-font-body); font-size: 1.0625rem; line-height: 1.65; color: var(--fd-ink); background: var(--fd-surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--fd-font-head); color: var(--fd-ink); letter-spacing: -.012em; line-height: 1.12; text-wrap: balance; }
h1, h2, h3, .display-1, .display-3, .display-5, .display-6 { font-weight: 600 !important; }
.display-1 { font-size: clamp(2.35rem, 5.4vw, 4.1rem); }
.display-3 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.display-5 { font-size: clamp(1.75rem, 3.4vw, 2.55rem); }
.display-6 { font-size: clamp(1.45rem, 2.6vw, 2rem); }
p { text-wrap: pretty; }
.text-body { color: var(--fd-ink) !important; }
.bg-light { background-color: var(--fd-surface-alt) !important; }
.bg-white { background-color: var(--fd-surface) !important; }
.bg-primary { background-color: var(--fd-primary) !important; }
.bg-secondary { background-color: var(--fd-accent) !important; }
.bg-dark { background-color: var(--fd-ink) !important; }
.text-primary { color: var(--fd-accent) !important; }
.text-secondary { color: var(--fd-accent) !important; }
.border-primary { border-color: var(--fd-primary) !important; }
.rounded { border-radius: var(--fd-radius) !important; }

/* Los enlaces dentro de un texto se subrayan: el color solo no basta para distinguirlos (WCAG 1.4.1). */
a { color: var(--fd-accent); }
a:hover { color: var(--fd-primary); }
p a:not(.btn), li a:not(.btn), address a:not(.btn), small a:not(.btn) { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.fd-card, .fd-card:hover, .text-decoration-none { text-decoration: none !important; }

:focus-visible { outline: 3px solid var(--fd-accent); outline-offset: 3px; border-radius: 4px; }
.bg-dark :focus-visible, .bg-primary :focus-visible, .bg-secondary :focus-visible, .carousel :focus-visible, .hero-header :focus-visible, .fd-subfooter :focus-visible { outline-color: #fff; }

/* ───── botones: un solo llamado a la acción, en el color principal ───── */
.btn { font-family: var(--fd-font-body); font-weight: 700; letter-spacing: .01em; border-radius: 999px; border-width: 2px; padding: .8rem 1.7rem; transition: background-color .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn-primary, .btn-secondary { background: var(--fd-primary); border-color: var(--fd-primary); color: var(--fd-on-primary); box-shadow: 0 8px 22px rgba(var(--fd-primary-rgb), .28); }
.btn-primary:hover, .btn-secondary:hover, .btn-primary:focus, .btn-secondary:focus { background: var(--fd-primary-dark); border-color: var(--fd-primary-dark); color: var(--fd-on-primary); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(var(--fd-primary-rgb), .34); }
.btn-light { background: #fff; border-color: #fff; color: var(--fd-ink); }
.btn-light:hover, .btn-light:focus { background: var(--fd-surface-alt); border-color: var(--fd-surface-alt); color: var(--fd-primary-dark); }
.btn-outline-primary, .btn-outline-secondary { color: var(--fd-primary); border-color: var(--fd-primary); background: transparent; }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-primary:focus, .btn-outline-secondary:focus { background: var(--fd-primary); border-color: var(--fd-primary); color: var(--fd-on-primary); }
.btn-lg-square { width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ───── barra superior y menú ───── */
.fd-topbar { background: var(--fd-surface-alt); color: var(--fd-ink); font-size: .92rem; }
.fd-topbar i { color: var(--fd-accent); }
.top-shape::before { background: var(--fd-primary) !important; }
.navbar { background: rgba(255, 255, 255, .94) !important; -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); box-shadow: 0 1px 0 rgba(var(--fd-ink-rgb), .06) !important; z-index: 1020; }
.navbar-brand img { height: 56px; width: auto; }
.navbar-light .navbar-nav .nav-link { font-family: var(--fd-font-body); font-weight: 600; font-size: 1rem; padding: 1.55rem .95rem; color: var(--fd-ink); position: relative; transition: color .2s; }
.navbar-light .navbar-nav .nav-link::after { content: ""; position: absolute; left: .95rem; right: .95rem; bottom: 1rem; height: 2px; background: var(--fd-primary); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link[aria-current="page"] { color: var(--fd-primary) !important; }
.navbar-light .navbar-nav .nav-link:hover::after, .navbar-light .navbar-nav .nav-link.active::after, .navbar-light .navbar-nav .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.navbar-light .navbar-nav .dropdown-toggle::after { display: inline-block; position: static; height: auto; background: none; transform: none; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; margin-left: .4em; vertical-align: .2em; }
.dropdown-menu { border: 0; border-radius: var(--fd-radius-sm); box-shadow: var(--fd-shadow-2); padding: .5rem; }
.dropdown-item { border-radius: 8px; padding: .55rem .9rem; color: var(--fd-ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--fd-surface-alt); color: var(--fd-primary); }
@media (min-width: 992px) { .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } }
@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link { padding: .8rem 0; }
  .navbar-light .navbar-nav .nav-link::after { display: none; }
  .navbar-collapse { padding-bottom: 1rem; }
}

/* ───── portada: la foto se ve; el texto va a la izquierda sobre una sombra suave ───── */
#header-carousel .carousel-item > picture, #header-carousel .carousel-item > img { display: block; }
#header-carousel .carousel-item img { width: 100%; height: clamp(520px, 80vh, 780px); object-fit: cover; }
.carousel-caption { background: linear-gradient(90deg, rgba(var(--fd-ink-rgb), .86) 0%, rgba(var(--fd-ink-rgb), .6) 46%, rgba(var(--fd-ink-rgb), .08) 100%) !important; align-items: flex-start !important; text-align: left; padding: 0 clamp(20px, 6vw, 110px); }
.carousel-caption > div { padding-left: 0 !important; max-width: 700px !important; }
.carousel-caption h1, .carousel-caption .display-1 { font-size: clamp(2.2rem, 5vw, 4rem) !important; font-weight: 600 !important; line-height: 1.06; color: #fff !important; }
.carousel-caption p.h5 { letter-spacing: .14em; font-size: .82rem; font-weight: 700; font-family: var(--fd-font-body); }
@media (max-width: 767.98px) {
  .carousel-caption { background: linear-gradient(180deg, rgba(var(--fd-ink-rgb), .55), rgba(var(--fd-ink-rgb), .86)) !important; justify-content: flex-end !important; padding-bottom: 36px; }
  #header-carousel .carousel-item img { height: 560px; }
}
.carousel-control-prev, .carousel-control-next { width: 8%; }

/* ───── cabecera de las páginas internas ───── */
.hero-header { background: linear-gradient(135deg, var(--fd-primary-dark), var(--fd-primary)) !important; position: relative; overflow: hidden; margin-bottom: 3rem !important; }
.hero-header::after { content: ""; position: absolute; right: -8%; bottom: -70%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 66%); pointer-events: none; }
.hero-header h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); color: #fff !important; }
.crumbs a, .crumbs li { color: #fff; }

/* ───── secciones y títulos ───── */
.section-title p.h5, .section-title .h5 { font-family: var(--fd-font-body); font-weight: 700; font-size: .8rem; letter-spacing: .14em; color: var(--fd-accent) !important; }
.section-title h5::before { background: var(--fd-primary) !important; }
.section-title h5::after { background: var(--fd-accent) !important; }
section.banner .bg-primary, section.banner .bg-secondary { border-radius: var(--fd-radius); }
section.banner .col-lg-6:first-child .bg-primary { border-radius: var(--fd-radius) 0 0 var(--fd-radius); }
section.banner .col-lg-6:last-child .bg-secondary { border-radius: 0 var(--fd-radius) var(--fd-radius) 0; }
@media (max-width: 991.98px) { section.banner .bg-primary, section.banner .bg-secondary { border-radius: var(--fd-radius) !important; margin-bottom: 1rem; } }

/* ───── tarjetas ───── */
.fd-card { border: 0; border-radius: var(--fd-radius); background: #fff; box-shadow: var(--fd-shadow-1); padding: 1.6rem; transition: transform .25s, box-shadow .25s; }
.fd-card:hover { transform: translateY(-4px); box-shadow: var(--fd-shadow-2); }
.fd-card h3 { font-size: 1.3rem; }
.fd-card img { border-radius: var(--fd-radius-sm); }
.fd-faq details { background: var(--fd-surface-alt); border-radius: var(--fd-radius-sm); padding: 1rem 1.25rem; margin-bottom: .75rem; border: 0; }
.fd-faq summary { font-weight: 700; }
.fd-faq details[open] summary { color: var(--fd-primary); }
.fd-checks li::before { color: var(--fd-accent) !important; }

/* ───── formularios ───── */
.form-control, .form-select { border-radius: 14px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem rgba(var(--fd-primary-rgb), .18); border-color: var(--fd-primary); }
.form-check-input:checked { background-color: var(--fd-primary); border-color: var(--fd-primary); }
.fd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.alert-danger { border: 0; border-radius: var(--fd-radius-sm); background: #FDE8EF; color: #7A0F34; padding: .8rem 1rem; margin-bottom: 1rem; }
.fd-prose h2 { font-family: var(--fd-font-head); }
.fd-prose li { margin-bottom: .5rem; }

/* ───── pie de página ───── */
.fd-footer { background: var(--fd-ink) !important; }
.fd-footer a.text-light { text-decoration: underline; text-underline-offset: .2em; }
.fd-footer i { color: #fff; opacity: .85; }
.fd-subfooter { background: #0F0B1C; }
.fd-subfooter a { text-decoration: underline; text-underline-offset: .2em; }

/* ───── conversión en móvil: barra fija de WhatsApp ───── */
.fd-sticky-cta { position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 1030; display: flex; align-items: center; justify-content: center; padding: .95rem 1.2rem; box-shadow: 0 14px 34px rgba(var(--fd-ink-rgb), .34) !important; }
@media (max-width: 991.98px) { body { padding-bottom: 88px; } .back-to-top { bottom: 92px !important; } }
.back-to-top { right: 18px; }

/* ───── movimiento: aparición suave; sin nada si la persona pidió menos movimiento ───── */
.wow, .animated { visibility: visible !important; animation: none !important; }
.fd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.fd-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fd-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}