/* Dental Stocks, C.A. — propuesta 2: multi-pagina (moderna)
   Misma identidad visual que la propuesta de pagina unica, reorganizada
   en paginas separadas (index, servicios, nosotros, seguro, contacto),
   igual que la estructura del sitio original.
   Paleta exacta tomada del CSS real de dentalmcbo.net:
   navy #003282, cyan #03A5E1, lima #C2D501 (hover), lima oscuro #9BAA01 (activo)

   Tipografia: Outfit (SIL Open Font License) auto-alojada solo para titulares.
   El cuerpo usa la fuente del sistema: cero peticiones extra y cero costo. */

@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/outfit.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #003282;
  --navy-dark: #001c49;
  --cyan: #03a5e1;
  --lime: #c2d501;
  --lime-active: #9baa01;
  --ink: #17233b;
  --gray-700: #45516b;
  --gray-500: #6b7690;
  --gray-300: #d7dce6;
  --gray-100: #f3f5f9;
  --white: #ffffff;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px -12px rgba(0, 50, 130, 0.18);
  --container: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Outfit", var(--font);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #ffffff; overscroll-behavior-y: none; height: 100%; }
section[id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Transicion nativa entre paginas (Chrome/Edge; se ignora sin ruido en el resto). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; color: var(--navy-dark); }
h1, h2 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}
h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; }
p { margin: 0 0 1em; color: var(--gray-700); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--gray-100); }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0, 174, 239, .1);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); }
.section-head p { font-size: 17px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--navy); color: var(--white); box-shadow: 0 6px 16px -8px rgba(0, 10, 30, .45); }
.btn--primary:hover { background: var(--navy-dark); box-shadow: 0 10px 22px -8px rgba(0, 10, 30, .55); transform: translateY(-1px); }
.btn--light { background: var(--white); color: var(--navy-dark); box-shadow: 0 6px 16px -8px rgba(0, 10, 30, .35); }
.btn--light:hover { background: var(--gray-100); box-shadow: 0 10px 22px -8px rgba(0, 10, 30, .4); transform: translateY(-1px); }
.btn--whatsapp { background: #25d366; color: #06340f; box-shadow: 0 6px 16px -8px rgba(0, 10, 30, .35); }
.btn--whatsapp:hover { box-shadow: 0 10px 22px -8px rgba(0, 10, 30, .42); transform: translateY(-1px); }
.btn--whatsapp-ghost { background: var(--white); color: #1a8a4a; border: 1.5px solid #bfe8cf; box-shadow: none; }
.btn--whatsapp-ghost:hover { background: #f0faf3; border-color: #25d366; transform: translateY(-1px); }
.btn--outline { background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.4); color: var(--white); }
.btn--outline:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }
.btn--block { width: 100%; justify-content: center; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--gray-300);
  transition: box-shadow .3s var(--ease);
}
.header--scrolled { box-shadow: 0 8px 24px -16px rgba(0, 10, 40, .3); }
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 56px; width: auto; transition: height .3s var(--ease); }
.header--scrolled .brand img { height: 46px; }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  padding: 6px 2px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--lime);
  transition: right .25s var(--ease);
}
.nav a:hover { color: var(--navy); }
.nav a:hover::after { right: 0; }
.nav a.is-active { color: var(--navy); font-weight: 700; }
.nav a.is-active::after { right: 0; }
.header__cta { display: flex; align-items: center; gap: 12px; }
.header__cta .btn { padding: 11px 18px; font-size: 15px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy-dark);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -7px; }
.nav-toggle span::after { position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero {
  background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 62%, #0057b8 100%);
  color: var(--white);
  padding: 76px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 174, 239, .35), transparent 70%);
  z-index: 0;
}
/* Trama de puntos: le quita la sensacion de azul plano sin sumar un solo KB. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 12% 28%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 70% at 12% 28%, #000, transparent 72%);
  z-index: 0;
  pointer-events: none;
}
.hero__grid {
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
.hero h1 { color: var(--white); font-size: clamp(32px, 4.6vw, 52px); }
.hero__accent { color: var(--lime); position: relative; white-space: nowrap; }
.hero__accent::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.02em;
  height: .08em;
  border-radius: 999px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
  animation: draw-underline .7s var(--ease) .9s forwards;
}
@keyframes draw-underline { to { transform: scaleX(1); } }
.hero__lead { color: rgba(255,255,255,.85); font-size: 21px; max-width: 480px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero__actions .btn { min-width: 188px; justify-content: center; }
.hero__actions-note { font-size: 13px; color: rgba(255,255,255,.55); margin: 10px 0 0; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.hero__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 14px;
  border-radius: 999px;
}
.hero__badge svg { width: 16px; height: 16px; color: var(--cyan); flex-shrink: 0; }
/* La foto va en arco, no en rectangulo generico, y lleva detras un marco
   lima desfasado que le da profundidad y usa el verde de la marca como
   trazo (no como relleno). */
.hero__visual { position: relative; --arch: 20px; }
.hero__visual-blob {
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(194, 213, 0, .45), transparent 72%);
  z-index: 0;
}
.hero__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid rgba(194, 213, 1, .55);
  border-radius: var(--arch);
  transform: translate(16px, 16px);
  z-index: 0;
  pointer-events: none;
}
.hero__visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 25%;
  border-radius: var(--arch);
  box-shadow: 0 24px 48px -20px rgba(0, 10, 40, .5);
  transition: transform .6s var(--ease);
}
.hero__visual:hover img { transform: scale(1.02); }

/* Page banner (inner pages) */
.page-hero {
  background: var(--gray-100);
  color: var(--ink);
  padding: 56px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--gray-300);
}
.page-hero::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 174, 239, .16), transparent 70%);
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--navy-dark); font-size: clamp(28px, 3.8vw, 40px); margin-bottom: 10px; }
.page-hero p { color: var(--gray-700); font-size: 17px; max-width: 560px; margin-bottom: 0; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
.breadcrumb a { color: var(--gray-700); }
.breadcrumb a:hover { color: var(--navy); }

/* Explore grid (Inicio -> otras paginas) */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.explore-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.explore-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.explore-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 174, 239, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.explore-card__icon svg { width: 22px; height: 22px; color: var(--navy); }
.explore-card h3 { font-size: 17px; margin-bottom: 6px; }
.explore-card p { font-size: 15px; margin-bottom: 14px; }
.explore-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--navy); }
.explore-card__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.explore-card:hover .explore-card__link svg { transform: translateX(3px); }

/* Services */
.section--photo-bg { position: relative; overflow: hidden; }
.section--photo-bg__img {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
  -webkit-mask-image: linear-gradient(to left, black 25%, transparent 95%);
  mask-image: linear-gradient(to left, black 25%, transparent 95%);
  z-index: 0;
  pointer-events: none;
}
.section--photo-bg > .container { position: relative; z-index: 1; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.service-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 26px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service-card:hover { box-shadow: var(--shadow); border-color: transparent; }
.service-card__icon {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  width: 46px;
  height: 46px;
}
.service-card__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(3, 165, 225, .18) 0%, transparent 72%);
  z-index: -1;
}
.service-card__icon svg {
  width: 42px;
  height: 42px;
  transition: transform .4s var(--ease);
}
.service-card:hover .service-card__icon svg { transform: scale(1.12) rotate(-6deg); }
.service-card__watermark {
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 130px;
  height: 130px;
  color: var(--navy);
  opacity: .05;
  pointer-events: none;
}
.service-card__watermark svg { width: 100%; height: 100%; }
.service-card h3, .service-card ul { position: relative; z-index: 1; }
.service-card h3 { font-size: 17px; margin-bottom: 12px; }
.service-card ul { display: grid; gap: 8px; }
.service-card li {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  color: var(--gray-700);
  line-height: 1.5;
}
.service-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.specialties {
  margin-top: 40px;
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr .85fr;
  align-items: center;
  gap: 32px;
}
.specialties h3 { color: var(--navy-dark); font-size: 21px; margin-bottom: 8px; }
.specialties p { color: var(--gray-700); margin-bottom: 0; font-size: 17px; line-height: 1.6; }
.specialties__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.specialties__media { border-radius: var(--radius-sm); overflow: hidden; }
.specialties__media img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: center 15%; transition: transform .6s var(--ease); }
.specialties:hover .specialties__media img { transform: scale(1.06); }
.pill {
  background: rgba(0, 50, 130, .06);
  color: var(--navy);
  border: 1px solid rgba(0, 50, 130, .16);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

/* About */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.about-grid p { font-size: 15px; }
.about-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform .6s var(--ease);
}
.about-media:hover img { transform: scale(1.03); }

/* Mision / Vision: segundo momento de color del scroll.
   Bloque contenido con bordes redondeados, NO franja plana a todo lo ancho. */
.mv-band {
  position: relative;
  overflow: hidden;
  margin-top: 72px;
  padding: 56px;
  border-radius: 24px;
  background: linear-gradient(150deg, var(--navy-dark) 0%, var(--navy) 72%, #0057b8 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.mv-band::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(3, 165, 225, .3), transparent 70%);
  pointer-events: none;
}
.mv-block { position: relative; z-index: 1; }
.mv-block__mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 72px;
  line-height: .8;
  color: var(--lime);
  opacity: .5;
  margin-bottom: 8px;
}
.mv-block h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--lime); margin-bottom: 12px; }
.mv-block p { font-size: 21px; line-height: 1.55; color: rgba(255,255,255,.92); margin-bottom: 0; }

/* Insurance / accordion */
.insurance-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; margin-bottom: 48px; }
.insurance-top__card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.insurance-top__card__media { height: 160px; overflow: hidden; }
.insurance-top__card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; transition: transform .6s var(--ease); }
.insurance-top__card:hover .insurance-top__card__media img { transform: scale(1.06); }
.insurance-top__card__body { padding: 24px 28px 28px; }
.insurance-top__card h3 { font-size: 17px; }
.insurance-top__card ul { display: grid; gap: 10px; }
.insurance-top__card li { display: flex; gap: 10px; font-size: 15px; color: var(--gray-700); }
.insurance-top__card li svg { width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; }

.accordion { border-top: 1px solid var(--gray-300); }
.accordion-item { border-bottom: 1px solid var(--gray-300); }
.accordion-item__btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  text-align: left;
  padding: 20px 4px;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-dark);
  cursor: pointer;
}
.accordion-item__btn svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; transition: transform .3s var(--ease); }
.accordion-item.is-open .accordion-item__btn svg { transform: rotate(180deg); }
.accordion-item__panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.accordion-item.is-open .accordion-item__panel { max-height: 600px; }
.accordion-item__body { padding: 0 4px 20px; font-size: 15px; color: var(--gray-700); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; }
.contact-list { display: grid; gap: 18px; margin-bottom: 28px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list__icon {
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-top: 2px;
}
.contact-list__icon svg { width: 24px; height: 24px; color: var(--navy); }
.contact-list h4 { font-size: 15px; margin-bottom: 2px; color: var(--navy-dark); }
.contact-list p, .contact-list a { font-size: 15px; margin-bottom: 0; }
.contact-list a:hover { color: var(--cyan); }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
}
.social-row a:hover { background: var(--cyan); color: var(--white); }
.social-row svg { width: 18px; height: 18px; }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gray-300);
  margin-top: 24px;
}
.map-wrap iframe { width: 100%; height: 260px; border: 0; display: block; }

.form-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.form-card__media {
  position: relative;
  margin: -32px -32px 24px;
  height: 170px;
  overflow: hidden;
}
.form-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.form-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 28, 73, 0) 0%, rgba(0, 28, 73, .3) 100%);
}
.form-row { display: grid; gap: 6px; margin-bottom: 18px; }
.form-row label { font-size: 13px; font-weight: 700; color: var(--navy-dark); }
.form-row input, .form-row textarea {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  background: var(--gray-100);
}
.form-row input:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--cyan);
  background: var(--white);
}
.form-row textarea { resize: vertical; min-height: 110px; }
.form-hint { font-size: 13px; color: var(--gray-500); margin-top: 10px; margin-bottom: 0; }
.form-error { font-size: 13px; color: #c0392b; margin: -4px 0 12px; display: none; }
.form-error.is-visible { display: block; }

/* Footer */
.footer { background: var(--gray-100); color: var(--gray-700); border-top: 1px solid var(--gray-300); padding: 56px 0 28px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer .brand img { height: 44px; }
.footer p { color: var(--gray-500); font-size: 15px; }
.footer h4 { color: var(--navy-dark); font-size: 15px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 16px; }
.footer ul { display: grid; gap: 10px; }
.footer a { font-size: 15px; color: var(--gray-700); }
.footer a:hover { color: var(--navy); }
.footer .social-row a { background: var(--white); border: 1px solid var(--gray-300); color: var(--navy); }
.footer .social-row a:hover { background: var(--cyan); color: var(--white); border-color: transparent; }
.footer__bottom {
  border-top: 1px solid var(--gray-300);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--gray-500);
}

/* WhatsApp floating button */
.fab-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #06340f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(37, 211, 102, .6);
  transition: transform .15s ease;
}
.fab-whatsapp:hover { transform: scale(1.06); }
.fab-whatsapp svg { width: 28px; height: 28px; }
.fab-whatsapp {
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.fab-whatsapp--hidden {
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
}

/* Instalaciones: carrusel */
.carousel { max-width: 820px; margin: 0 auto; }
.carousel__stage { position: relative; width: 100%; height: 0; padding-top: 75%; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #0b1220; }
.carousel__slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transform: translateX(calc(60px * var(--dir, 1))) scale(.94); transition: transform .5s var(--ease), opacity .5s var(--ease); }
.carousel__slide.is-active { opacity: 1; transform: translateX(0) scale(1); z-index: 1; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); border: none; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background .25s var(--ease), transform .25s var(--ease); padding: 0; }
.carousel__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel__arrow svg { width: 20px; height: 20px; color: var(--navy-dark); }
.carousel__arrow--prev { left: 14px; }
.carousel__arrow--next { right: 14px; }
.carousel__counter { position: absolute; bottom: 14px; right: 16px; z-index: 3; background: rgba(23,35,59,.6); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.carousel__thumbs { display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; padding: 4px 2px 8px; justify-content: center; }
.carousel__thumb { flex-shrink: 0; width: 76px; height: 56px; border-radius: 10px; overflow: hidden; padding: 0; border: 2px solid transparent; cursor: pointer; opacity: .5; transition: opacity .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); background: none; }
.carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__thumb.is-active { opacity: 1; border-color: var(--navy); transform: scale(1.04); }
@media (max-width: 560px) {
  .carousel__arrow { width: 38px; height: 38px; }
  .carousel__arrow svg { width: 17px; height: 17px; }
  .carousel__thumb { width: 62px; height: 46px; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.services-grid .reveal:nth-child(2) { transition-delay: .08s; }
.services-grid .reveal:nth-child(3) { transition-delay: .16s; }
.services-grid .reveal:nth-child(4) { transition-delay: .24s; }

/* Hero entrance (above the fold, plays on load) */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero__enter { opacity: 0; animation: rise-in .8s var(--ease) forwards; }
.hero h1.hero__enter { animation-delay: .05s; }
.hero__lead.hero__enter { animation-delay: .18s; }
.hero__actions.hero__enter { animation-delay: .3s; }
.hero__actions-note.hero__enter { animation-delay: .36s; }
.hero__badges.hero__enter { animation-delay: .42s; }
.hero__visual.hero__enter { animation-delay: .2s; }

/* Responsive */
@media (max-width: 900px) {
  .nav, .header__cta .btn--outline-hide { display: none; }
  .nav-toggle { display: block; }
  .header--open .nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--white);
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-300);
    gap: 18px;
  }
  .hero__grid, .about-grid, .insurance-top, .contact-grid, .specialties, .mv-band { grid-template-columns: 1fr; }
  .hero__grid { gap: 28px; }
  .hero__visual { --arch: 16px; }
  .hero__visual::before { transform: translate(10px, 10px); }
  .hero__visual img { height: 280px; }
  .about-media { max-width: 320px; margin: 0 auto; }
  .mv-band { gap: 32px; padding: 32px 24px; border-radius: 18px; }
  .specialties__media { order: -1; min-height: 160px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .brand img { height: 40px; }
  .header__cta { gap: 8px; }
  .header__cta .btn--primary {
    width: 44px;
    height: 44px;
    padding: 0;
    min-width: 0;
    justify-content: center;
  }
  .header__cta .btn--primary span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .nav-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gray-100);
  }
}