/* ==========================================================================
   Cardiología Tijuana — Dr. Eduardo Canseco
   Sistema de diseño y hoja de estilos principal
   Autor: rediseño 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens de diseño
   -------------------------------------------------------------------------- */
:root {
  /* Marca — tomada del logotipo (doble corazón rojo/azul con trazo ECG) */
  --navy-900: #04101F;
  --navy-800: #061B34;
  --navy-700: #0A2748;
  --navy-600: #0E355F;
  --blue-600: #0E5FBF;
  --blue-500: #1A72D6;
  --blue-400: #3E8FE8;
  --blue-200: #A9CDF3;
  --blue-050: #EAF3FD;

  --crimson-600: #C0173A;
  --crimson-500: #D81E3F;
  --crimson-400: #EC4463;
  --crimson-050: #FDECF0;

  --bone-050: #FFFFFF;
  --bone-100: #F5F8FC;
  --bone-200: #E8EEF6;
  --bone-300: #D3DEEB;

  --ink-900: #0B1725;
  --ink-700: #2B3B4E;
  --ink-500: #5A6B80;
  --ink-400: #8496A9;

  /* Semánticos */
  --bg: var(--bone-050);
  --bg-alt: var(--bone-100);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --line: var(--bone-200);
  --brand: var(--blue-600);
  --accent: var(--crimson-500);

  /* Tipografía */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala tipográfica fluida */
  --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --fs-sm: clamp(0.8125rem, 0.79rem + 0.2vw, 0.9375rem);
  --fs-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.28rem + 1.1vw, 2.125rem);
  --fs-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --fs-3xl: clamp(2.25rem, 1.62rem + 3.1vw, 4.25rem);
  --fs-hero: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 3rem);
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 26px;
  --radius-xl: 38px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(6, 27, 52, 0.06), 0 2px 6px rgba(6, 27, 52, 0.05);
  --shadow: 0 4px 12px rgba(6, 27, 52, 0.07), 0 12px 32px rgba(6, 27, 52, 0.08);
  --shadow-lg: 0 10px 24px rgba(6, 27, 52, 0.09), 0 30px 70px rgba(6, 27, 52, 0.13);
  --shadow-brand: 0 10px 30px rgba(14, 95, 191, 0.28);

  /* Movimiento */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 380ms;
  --dur-slow: 760ms;

  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 var(--sp-4);
  color: var(--navy-800);
  text-wrap: balance;
  /* Palabras largas como «Ecocardiograma» desbordan en pantallas estrechas.
     `break-word` sólo actúa cuando la palabra de verdad no cabe; se descartó
     `hyphens: auto` porque partía «diag-nóstico» en el título del hero. */
  overflow-wrap: break-word;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson-500); }

img, svg, video { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--crimson-500); color: #fff; }

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  background: var(--navy-800);
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 999;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--wide { max-width: 1480px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--alt { background: var(--bg-alt); }
/* Dos secciones seguidas con el mismo fondo se leen como una sola franja:
   se elimina el doble relleno para que no aparezca un hueco vacío entre ellas. */
.section--alt + .section--alt,
.section--navy + .section--navy { padding-top: 0; }
.section--navy {
  background: var(--navy-800);
  color: #E4ECF6;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy a { color: var(--blue-200); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: var(--sp-4); }

/* Encabezado de sección */
.section-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.75rem);
}
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--crimson-500);
  margin-bottom: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.section--navy .eyebrow { color: var(--blue-400); }
.section-head--center .eyebrow::before { display: none; }

.lead {
  font-size: var(--fs-md);
  color: var(--fg-muted);
  line-height: 1.7;
}
.section--navy .lead { color: #A9BDD4; }

/* --------------------------------------------------------------------------
   4. Botones
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--blue-600);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;   /* sin esto la etiqueta se parte y el botón crece de alto */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.32) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 620ms var(--ease-out);
  z-index: -1;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
  color: var(--btn-fg);
}
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0); }

.btn--accent { --btn-bg: var(--crimson-500); }
.btn--accent:hover { box-shadow: 0 10px 30px rgba(216, 30, 63, 0.32); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  border-color: var(--bone-300);
}
.btn--ghost:hover {
  --btn-bg: var(--navy-800);
  --btn-fg: #fff;
  border-color: var(--navy-800);
  box-shadow: var(--shadow);
}

.btn--on-dark {
  --btn-bg: rgba(255,255,255,0.08);
  --btn-fg: #fff;
  border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(8px);
}
.btn--on-dark:hover { --btn-bg: #fff; --btn-fg: var(--navy-800); border-color: #fff; }

.btn--lg { padding: 1.15rem 2.2rem; font-size: var(--fs-base); }
/* Los botones a todo el ancho sí pueden partir línea: en pantallas estrechas
   una etiqueta larga como «Llamar 664 416 2551» se desbordaría. */
.btn--block { width: 100%; white-space: normal; }

.btn svg { width: 18px; height: 18px; flex: none; }

/* Enlace con flecha */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--blue-600);
}
.arrow-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.arrow-link:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   5. Barra superior + cabecera
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--navy-800);
  color: #B9CBE0;
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 40px;
  flex-wrap: wrap;
}
.topbar__list { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.topbar__list li { margin: 0; }
.topbar a { color: #B9CBE0; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; transition: color var(--dur-fast) var(--ease-out); }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; opacity: 0.8; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}
.site-header.is-stuck {
  box-shadow: 0 1px 0 rgba(6,27,52,0.06), 0 8px 30px rgba(6,27,52,0.08);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
  transition: min-height var(--dur) var(--ease-out);
}
.site-header.is-stuck .header__inner { min-height: 64px; }

.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }

/* Logotipo completo: el corazón y los dos textos van dentro de la imagen,
   así que el HTML ya no repite «Cardiología Tijuana / Dr. Eduardo Canseco». */
.brand__logo {
  height: 50px;
  width: auto;
  object-fit: contain;
  transition: height var(--dur) var(--ease-out);
}
.site-header.is-stuck .brand__logo { height: 42px; }
@media (max-width: 480px) {
  .brand__logo { height: 40px; }
  .site-header.is-stuck .brand__logo { height: 36px; }
}
.brand__logo--pie { width: min(260px, 100%); height: auto; }

/* Se conserva para quien siga usando sólo el corazón */
.brand__mark { width: 46px; height: 46px; object-fit: contain; transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out); }
.site-header.is-stuck .brand__mark { width: 40px; height: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }

/* La cabecera lleva sólo el corazón y el nombre del consultorio.
   El nombre del doctor vive en el logotipo completo del pie. */
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy-800);
  white-space: nowrap;
}
.brand__name--claro { color: #fff; }

.brand__sub {
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 500;
}

@media (max-width: 380px) {
  .brand__name { font-size: 0.95rem; }
}

/* Navegación */
.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav__list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; position: relative; }

.nav__link {
  display: block;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-700);
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--navy-800); background: var(--blue-050); }
.nav__link[aria-current="page"] { color: var(--blue-600); font-weight: 600; }
/* Estando en una página hija, el padre se resalta pero sin aria-current:
   la página actual es la hija, no el padre. */
.nav__link.is-ancestor { color: var(--blue-600); font-weight: 600; }

/* Submenú */
.has-sub > .nav__link::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.45rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
}
.sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 292px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
  z-index: 60;
}
.has-sub:hover > .sub-menu,
.has-sub:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.sub-menu li { margin: 0; }
.sub-menu a {
  display: block;
  padding: 0.62rem 0.85rem;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--ink-700);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sub-menu a:hover { background: var(--blue-050); color: var(--navy-800); }

/* Acciones de la cabecera.
   Se afinan respecto al botón genérico: en una barra de 76 px, dos píldoras
   del mismo peso compiten entre sí. «Llamar» queda como acción discreta y
   «Agenda tu cita» como la única llamada de acción con presencia. */
.header__cta { display: flex; align-items: center; gap: 0.45rem; }

.header__cta .btn {
  padding: 0.68rem 1.3rem;
  font-size: 0.875rem;
  letter-spacing: 0.005em;
  transition: padding var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}

/* «Llamar»: sin caja pesada, sólo un realce suave al pasar el cursor */
.header__cta .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-700);
  border-color: transparent;
  padding-inline: 0.95rem;
}
.header__cta .btn--ghost svg {
  width: 16px; height: 16px;
  color: var(--blue-600);
  transition: transform var(--dur) var(--ease-out);
}
.header__cta .btn--ghost:hover {
  --btn-bg: var(--blue-050);
  --btn-fg: var(--navy-800);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
.header__cta .btn--ghost:hover svg { transform: rotate(-12deg) scale(1.08); }

/* «Agenda tu cita»: degradado sutil, sombra de color y elevación al pasar */
.header__cta .btn--accent {
  background-image: linear-gradient(135deg, var(--crimson-400) 0%, var(--crimson-600) 100%);
  box-shadow: 0 2px 6px rgba(192, 23, 58, 0.20), 0 6px 18px rgba(192, 23, 58, 0.22);
}
.header__cta .btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(192, 23, 58, 0.24), 0 12px 26px rgba(192, 23, 58, 0.32);
}
.header__cta .btn--accent:active { transform: translateY(0); }

/* Se compacta junto con la cabecera al desplazar */
.site-header.is-stuck .header__cta .btn { padding-block: 0.58rem; }

/* Botón hamburguesa */
.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: var(--blue-050);
  border: 1px solid var(--bone-200);
  border-radius: 12px;
  cursor: pointer;
  flex: none;
}
.nav-toggle__bars { position: relative; width: 20px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: var(--navy-800);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Barra de progreso de lectura */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue-500), var(--crimson-500));
  z-index: 2;
}

/* --------------------------------------------------------------------------
   6. Hero — slider panorámico
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 88svh, 900px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--navy-900);
  color: #fff;
  isolation: isolate;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1100ms var(--ease-in-out), visibility 1100ms;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  will-change: transform;
}
.hero__slide.is-active .hero__media {
  animation: kenburns 11s var(--ease-out) forwards;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.15) translate3d(-1.4%, -1.2%, 0); }
}

/* Velo para contraste de texto (AA sobre foto) */
.hero__slides::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4,16,31,0.93) 0%, rgba(4,16,31,0.82) 40%, rgba(4,16,31,0.50) 70%, rgba(4,16,31,0.62) 100%),
    linear-gradient(to top, rgba(4,16,31,0.78) 0%, transparent 46%);
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 3;
  padding-block: clamp(5rem, 3rem + 9vw, 9rem);
  width: 100%;
}
.hero__content { max-width: 44rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.09);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #DCE8F5;
  margin-bottom: var(--sp-5);
}
.hero__badge b { color: #fff; font-weight: 600; }
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson-400);
  box-shadow: 0 0 0 0 rgba(236, 68, 99, 0.7);
  animation: pulse-dot 2.4s infinite;
  flex: none;
  margin-left: 0.35rem;
}
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0 rgba(236, 68, 99, 0.65); }
  70%  { box-shadow: 0 0 0 12px rgba(236, 68, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 68, 99, 0); }
}

.hero__title {
  font-size: var(--fs-hero);
  color: #fff;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: var(--sp-5);
}
.hero__title .accent {
  background: linear-gradient(96deg, var(--crimson-400), var(--blue-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__text {
  font-size: var(--fs-md);
  color: #C6D6E7;
  max-width: 40rem;
  margin-bottom: var(--sp-6);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: var(--sp-7); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 0.8rem + 2.4vw, 3.2rem);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero__meta-item { min-width: 90px; }
.hero__meta-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__meta-label {
  font-size: var(--fs-xs);
  color: #93AAC4;
  letter-spacing: 0.05em;
}

/* Controles del slider */
.hero__controls {
  position: absolute;
  z-index: 4;
  bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.hero__dots { display: flex; gap: 0.5rem; margin-right: 0.4rem; }
.hero__dot {
  width: 34px; height: 4px;
  border: 0; padding: 0;
  border-radius: 99px;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur) var(--ease-out);
}
.hero__dot::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hero__dot.is-active::after { animation: dot-fill 7s linear forwards; }
.hero.is-paused .hero__dot.is-active::after { animation-play-state: paused; }
@keyframes dot-fill { to { transform: scaleX(1); } }

.hero__arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.hero__arrow:hover { background: #fff; color: var(--navy-800); transform: scale(1.06); }
.hero__arrow svg { width: 17px; height: 17px; }

/* Indicador de scroll */
.hero__scroll {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9FB6CE;
  text-decoration: none;
}
.hero__scroll-line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, transparent, #9FB6CE);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--crimson-400);
  animation: scroll-run 2.2s var(--ease-in-out) infinite;
}
@keyframes scroll-run {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* Hero interior (páginas secundarias) */
.page-hero {
  position: relative;
  background: var(--navy-800);
  color: #fff;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  opacity: 0.34;
  transform: scale(1.05);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(6,27,52,0.95) 12%, rgba(6,27,52,0.62) 100%);
}
.page-hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.page-hero .lead { color: #B8CADD; max-width: 56ch; }

/* Migas de pan */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  font-size: var(--fs-xs);
  color: #8FA7C0;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 0.45rem; }
.breadcrumb li + li::before { content: "/"; opacity: 0.5; }
.breadcrumb a { color: #B8CADD; text-decoration: none; }
.breadcrumb a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   7. Franja de confianza / avales
   -------------------------------------------------------------------------- */
.trust {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
}
.trust__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.trust__label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  max-width: 15ch;
  line-height: 1.5;
}
.trust__logos { display: flex; align-items: center; gap: clamp(1.2rem, 0.5rem + 2.6vw, 3rem); flex-wrap: wrap; }
.trust__logos img {
  height: clamp(40px, 34px + 1.4vw, 56px);
  width: auto;
  opacity: 0.62;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.trust__logos img:hover { opacity: 1; filter: grayscale(0); }

/* --------------------------------------------------------------------------
   8. Tarjetas de procedimientos
   -------------------------------------------------------------------------- */
.proc-grid {
  display: grid;
  gap: clamp(1rem, 0.7rem + 1vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.proc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.proc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--blue-200);
  color: inherit;
}

.proc-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(140deg, var(--navy-700), var(--blue-600));
}
.proc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.proc-card:hover .proc-card__media img { transform: scale(1.07); }

.proc-card__icon {
  position: absolute;
  left: 1rem; bottom: 1rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  color: var(--crimson-500);
  box-shadow: var(--shadow-sm);
}
.proc-card__icon svg { width: 26px; height: 26px; }

.proc-card__body { padding: clamp(1.25rem, 1rem + 0.7vw, 1.75rem); display: flex; flex-direction: column; flex: 1; gap: 0.65rem; }
.proc-card__title { font-size: var(--fs-lg); margin: 0; letter-spacing: -0.02em; }
.proc-card__text { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; flex: 1; }
.proc-card__more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--blue-600);
  margin-top: 0.4rem;
}
.proc-card__more svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease-out); }
.proc-card:hover .proc-card__more svg { transform: translateX(5px); }

/* Tarjeta destacada (primera de la parrilla) */
.proc-card--feature { grid-column: span 2; }
.proc-card--feature .proc-card__media { aspect-ratio: 21 / 9; }
.proc-card--feature .proc-card__title { font-size: var(--fs-xl); }
@media (max-width: 780px) {
  .proc-card--feature { grid-column: span 1; }
  .proc-card--feature .proc-card__media { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   9. Bloque "media + texto"
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.split--reverse .split__media { order: 2; }
@media (max-width: 860px) { .split--reverse .split__media { order: 0; } }

.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Retrato del médico.
   La foto de origen es vertical y con fondo azul de estudio, así que se trata
   como retrato y no como imagen apaisada: proporción 3:4, ancho contenido y un
   halo suave que la despega del fondo en las secciones claras. */
.split__media--retrato { display: flex; justify-content: center; }
.split__media--retrato img {
  aspect-ratio: 3 / 4;
  max-width: 440px;
  width: 100%;
  object-fit: cover;
  object-position: center top;
}

.split__media--busto img {
  aspect-ratio: 1 / 1;
  max-width: 520px;
  object-fit: cover;
  object-position: center 22%;
  margin-inline: auto;
}

/* Marco de acento: fino filete en degradado alrededor del retrato */
.retrato-marco {
  position: relative;
  display: inline-block;
  border-radius: calc(var(--radius-lg) + 6px);
  padding: 6px;
  background: linear-gradient(150deg, var(--crimson-500), var(--blue-500) 70%);
  box-shadow: var(--shadow-lg);
}
.retrato-marco img {
  border-radius: var(--radius-lg);
  box-shadow: none;
  display: block;
}
.section--navy .retrato-marco {
  background: linear-gradient(150deg, rgba(236, 68, 99, 0.9), rgba(62, 143, 232, 0.9) 70%);
}

/* Rótulo con el nombre bajo el retrato */
.retrato-pie {
  margin-top: var(--sp-4);
  text-align: center;
}
.retrato-pie strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--navy-800);
  letter-spacing: -0.01em;
}
.retrato-pie span {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section--navy .retrato-pie strong { color: #fff; }
.section--navy .retrato-pie span { color: #A9BDD4; }

/* Retrato en la barra lateral de la página del médico */
.retrato-aside {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}

/* Formación y sociedades: rejilla de logotipos institucionales */
.instituciones {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  margin-top: var(--sp-5);
}
.institucion {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.institucion img {
  width: 54px; height: 54px;
  flex: none;
  object-fit: contain;
}
.institucion b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--navy-800);
}
.institucion span {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.section--navy .institucion {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.section--navy .institucion b { color: #fff; }
.section--navy .institucion span { color: #A9BDD4; }

/* Tarjeta flotante sobre la imagen */
.float-card {
  position: absolute;
  right: -1rem; bottom: -1.5rem;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 280px;
}
.float-card__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--crimson-050);
  color: var(--crimson-500);
}
.float-card__icon svg { width: 24px; height: 24px; }
.float-card__num { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--navy-800); }
.float-card__label { font-size: var(--fs-xs); color: var(--fg-muted); }
@media (max-width: 560px) { .float-card { position: static; margin-top: 1rem; max-width: none; } }

/* Lista con palomitas */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.check-list li { display: flex; gap: 0.75rem; margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.check-list li::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--blue-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5FBF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.section--navy .check-list li::before { background-color: rgba(255,255,255,0.12); }

/* --------------------------------------------------------------------------
   10. Cifras
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* Dentro de una columna de `.split` no caben tres cifras a 190 px y quedaban
   en 2 + 1, con un hueco al final. Aquí se reparten a partes iguales. */
.split .stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.split .stat { padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem); }
.split .stat__num { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); }
.split .stat__label { font-size: var(--fs-xs); }
@media (max-width: 620px) {
  .split .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
}
.stat {
  padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.section--alt .stat, .section:not(.section--navy) .stat {
  background: #fff;
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--navy-800);
  margin-bottom: 0.4rem;
}
.section--navy .stat__num { color: #fff; }
.stat__label { font-size: var(--fs-sm); color: var(--fg-muted); }
.section--navy .stat__label { color: #A9BDD4; }

/* --------------------------------------------------------------------------
   11. Línea de ECG animada (motivo de marca)
   -------------------------------------------------------------------------- */
.ecg-divider {
  width: 100%;
  height: 60px;
  overflow: hidden;
  display: block;
  color: var(--crimson-500);
  opacity: 0.85;
}
.ecg-divider path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.ecg-divider.is-visible path { animation: ecg-draw 2.6s var(--ease-in-out) forwards; }
@keyframes ecg-draw { to { stroke-dashoffset: 0; } }

/* --------------------------------------------------------------------------
   12. Pasos / proceso
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--crimson-500);
  margin-bottom: 0.5rem;
}
.step::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.step h3 { font-size: var(--fs-md); margin-bottom: 0.5rem; }
.step p { font-size: var(--fs-sm); color: var(--fg-muted); margin: 0; }
.section--navy .step::after { background: rgba(255,255,255,0.16); }
.section--navy .step p { color: #A9BDD4; }

/* --------------------------------------------------------------------------
   12a. Maqueta de artículo: el contenido manda, la barra lateral acompaña

   `.contact-grid` reparte columnas iguales, lo que en una página de lectura
   deja el texto a la mitad del ancho compitiendo con una tarjeta de contacto.
   Aquí la proporción es explícita: el contenido pesa casi el doble.
   -------------------------------------------------------------------------- */
.article-layout {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3.2vw, 4.5rem);
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
}

.article-layout__main { min-width: 0; }
.article-layout__aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: var(--sp-5);
  max-width: 380px;
}
/* En una tarjeta de 380 px un título a --fs-xl parte en dos líneas */
.article-layout__aside h3,
.doc-aside h3 { font-size: var(--fs-lg); letter-spacing: -0.02em; }
.article-layout__aside .form-card,
.doc-aside .form-card { padding: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); }
@media (max-width: 1000px) {
  .article-layout__aside { position: static; max-width: none; }
}

/* Ritmo tipográfico del artículo */
.article-body > * + * { margin-top: var(--sp-5); }
.article-body h2 {
  font-size: var(--fs-xl);
  margin: 0;
  padding-top: var(--sp-6);
  letter-spacing: -0.025em;
}
.article-body h2:first-child { padding-top: 0; }
.article-body p { font-size: var(--fs-md); line-height: 1.75; color: var(--ink-700); margin: 0; }
.article-body p + p { margin-top: var(--sp-4); }

/* --------------------------------------------------------------------------
   12b. Ficha rápida — lo que un paciente quiere saber antes de leer nada
   -------------------------------------------------------------------------- */
.factsheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--sp-7);
}
.factsheet__item {
  background: #fff;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.factsheet__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--blue-050);
  color: var(--blue-600);
}
.factsheet__icon svg { width: 18px; height: 18px; }
.factsheet__label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.factsheet__value {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.35;
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   12c. Rejilla de indicaciones — tarjetas en vez de una lista plana
   -------------------------------------------------------------------------- */
.indica-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.indica-grid li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--bone-100);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-700);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.indica-grid li:hover { background: #fff; border-color: var(--blue-200); }
.indica-grid li::before {
  content: "";
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--crimson-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D81E3F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 11px no-repeat;
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   12d. Secuencia de pasos — el «cómo se realiza» como recorrido, no como lista
   -------------------------------------------------------------------------- */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: flow; display: grid; gap: 0; }
.flow li {
  counter-increment: flow;
  position: relative;
  margin: 0;
  padding: 0 0 1.6rem 3.5rem;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink-700);
}
.flow li:last-child { padding-bottom: 0; }
.flow li::before {
  content: counter(flow);
  position: absolute;
  left: 0; top: -2px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 1;
}
/* Línea que une los pasos */
.flow li::after {
  content: "";
  position: absolute;
  left: 16px; top: 34px; bottom: 6px;
  width: 2px;
  background: linear-gradient(to bottom, var(--blue-200), var(--bone-200));
}
.flow li:last-child::after { display: none; }

/* --------------------------------------------------------------------------
   12e. Tarjeta de preparación
   -------------------------------------------------------------------------- */
.prep-card {
  background: linear-gradient(150deg, var(--blue-050), #fff 70%);
  border: 1px solid var(--blue-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
}
.prep-card h2 { padding-top: 0 !important; margin-bottom: var(--sp-4) !important; }
.prep-card .check-list li { font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   12f. Imagen destacada dentro del artículo
   -------------------------------------------------------------------------- */
.article-figure { margin: 0; }
.article-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.article-figure figcaption {
  margin-top: 0.75rem;
  font-size: var(--fs-xs);
  color: var(--ink-400);
  text-align: center;
}

/* --------------------------------------------------------------------------
   12g. Maqueta de documento: contenido + columna lateral fija

   Una sola columna estrecha centrada bajo un hero a todo el ancho deja
   franjas vacías a los lados y se lee como una página sin terminar. Estas
   páginas pasan a dos columnas: el texto a la izquierda con medida de
   lectura cómoda, y una columna lateral que acompaña el desplazamiento.
   -------------------------------------------------------------------------- */
.doc-layout {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
@media (max-width: 980px) {
  .doc-layout { grid-template-columns: 1fr; }
}

.doc-layout__main { max-width: 74ch; }

/* --------------------------------------------------------------------------
   12h. Página de presentación a todo el ancho

   Para páginas como «Nosotros» o la del médico, una columna estrecha con
   barra lateral desaprovecha la pantalla. Aquí el bloque ocupa todo el ancho:
   los párrafos conservan una medida de lectura cómoda, pero las rejillas de
   tarjetas, los logotipos y las imágenes se extienden de lado a lado.
   -------------------------------------------------------------------------- */
.prose-wide { max-width: none; }
.prose-wide > p,
.prose-wide > ul:not(.instituciones):not(.proc-grid),
.prose-wide > ol,
.prose-wide > blockquote { max-width: 72ch; }
.prose-wide > .instituciones,
.prose-wide > .proc-grid,
.prose-wide > .trust__logos,
.prose-wide > figure,
.prose-wide > .note-box { max-width: none; }

/* Encabezado de sección a dos columnas: título a la izquierda, entradilla a
   la derecha. Llena el ancho sin estirar la línea de texto. */
.section-split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: end;
  margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}
@media (max-width: 860px) {
  .section-split { grid-template-columns: 1fr; align-items: start; }
}
.section-split h2 { margin-bottom: 0; }

/* Dos columnas de texto corrido, para bloques largos sin rejilla */
.cols-2 {
  columns: 2;
  column-gap: clamp(2rem, 1.2rem + 3vw, 4rem);
}
.cols-2 > p { break-inside: avoid; margin-top: 0; }
@media (max-width: 860px) { .cols-2 { columns: 1; } }

/* Tarjetas de credencial */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
}
.cred {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cred__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--blue-050);
  color: var(--blue-600);
}
.cred__icon svg { width: 22px; height: 22px; }
.cred__label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson-500);
}
.cred__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-800);
  margin: 0;
}
.cred__meta { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.55; margin: 0; }
.section--navy .cred {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  box-shadow: none;
}
.section--navy .cred__title { color: #fff; }
.section--navy .cred__meta { color: #A9BDD4; }
.section--navy .cred__icon { background: rgba(255,255,255,0.1); color: var(--blue-200); }

.doc-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: var(--sp-5);
}
@media (max-width: 980px) {
  .doc-aside { position: static; }
}

/* Índice de contenidos */
.doc-toc {
  background: var(--bone-100);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}
.doc-toc h2,
.doc-toc h3 {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0 0 var(--sp-4);
}
.doc-toc ol,
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.doc-toc li { margin: 0; }
.doc-toc a {
  display: block;
  padding: 0.42rem 0.6rem;
  border-radius: 8px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--ink-700);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.doc-toc a:hover { background: #fff; color: var(--navy-800); }
.doc-toc a[aria-current="true"] {
  background: #fff;
  color: var(--blue-600);
  font-weight: 600;
  border-left-color: var(--crimson-500);
}

/* --------------------------------------------------------------------------
   13. Acordeón de preguntas frecuentes
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 0.75rem; }

/* Preguntas frecuentes a dos columnas: el encabezado se queda fijo a la
   izquierda mientras se recorren las preguntas. Llena el ancho y evita el
   bloque centrado y estrecho de antes. */
.faq-layout {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
  align-items: start;
}
@media (max-width: 980px) {
  .faq-layout { grid-template-columns: 1fr; }
}
.faq-layout__head {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}
@media (max-width: 980px) {
  .faq-layout__head { position: static; }
}
.faq-layout__head h2 { margin-bottom: var(--sp-4); }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.faq__item[open] { border-color: var(--blue-200); box-shadow: var(--shadow); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  color: var(--navy-800);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue-050) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E5FBF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(135deg); }
.faq__a { padding: 0 1.35rem 1.3rem; font-size: var(--fs-sm); color: var(--fg-muted); }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Llamado a la acción
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 1.6rem + 4vw, 5rem);
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 120% at 12% 0%, rgba(216,30,63,0.42), transparent 62%),
    radial-gradient(70% 130% at 92% 100%, rgba(14,95,191,0.55), transparent 60%);
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band .lead { color: #BFD1E4; max-width: 52ch; }
.cta-band__inner { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* --------------------------------------------------------------------------
   15. Contacto / formulario
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); align-items: start; }

.info-list { display: grid; gap: 1.15rem; list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; gap: 1rem; margin: 0; }
.info-list__icon {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--blue-050);
  color: var(--blue-600);
}
.info-list__icon svg { width: 22px; height: 22px; }
.info-list__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-bottom: 0.15rem;
}
.info-list__value { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.55; }
.info-list__value a { color: var(--navy-800); text-decoration: none; font-weight: 500; }
.info-list__value a:hover { color: var(--crimson-500); }

.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  box-shadow: var(--shadow);
}
.form-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.field .req { color: var(--crimson-500); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--fg);
  background: var(--bone-100);
  border: 1px solid var(--bone-200);
  border-radius: 12px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(26, 114, 214, 0.14);
}
.field-consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--fg-muted); margin-bottom: 1.25rem; }
.field-consent input { width: 18px; height: 18px; margin-top: 0.15rem; flex: none; accent-color: var(--blue-600); }

.form-note { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 0.9rem; }

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background: var(--bone-100);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* En «Dónde estamos» el mapa acompaña una columna larga de datos:
   con altura fija equilibra la sección y se lee mucho mejor la ubicación. */
#ubicacion .map-embed {
  aspect-ratio: auto;
  height: clamp(440px, 58vh, 660px);
}
@media (max-width: 860px) {
  #ubicacion .map-embed { height: clamp(360px, 52vh, 460px); }
}

/* --------------------------------------------------------------------------
   16. Pie de página
   -------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #93AAC4; padding-block: var(--sp-8) var(--sp-5); font-size: var(--fs-sm); }
.footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); } }

.footer__brand {
  display: block;
  margin-bottom: var(--sp-5);
  text-decoration: none;
  max-width: 100%;
}
/* El logotipo del pie es apaisado (4:1), así que se controla por ancho y no
   por alto: así ocupa una proporción estable de su columna en cualquier
   pantalla. El PNG va recortado al contenido, sin margen transparente, de
   modo que el tamaño declarado es el tamaño que se ve. */
.footer__brand img {
  width: min(260px, 100%);
  height: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 900px) {
  .footer__brand img { width: min(240px, 70%); }
}
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__sub { color: #6E86A0; }

.footer h4 {
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.footer__list li { margin: 0; }
.footer__list a { color: #93AAC4; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer__list a:hover { color: #fff; }

.social { display: flex; gap: 0.6rem; margin-top: var(--sp-4); }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  color: #C6D6E7;
  transition: background-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.social a:hover { background: var(--crimson-500); color: #fff; transform: translateY(-3px); }
.social svg { width: 19px; height: 19px; }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: #6E86A0;
}
.footer__bottom a { color: #93AAC4; text-decoration: none; }
.footer__bottom a:hover { color: #fff; }
.footer__legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.med-disclaimer {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  border-left: 3px solid var(--crimson-500);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: #8299B3;
}

/* --------------------------------------------------------------------------
   17. Botones flotantes
   -------------------------------------------------------------------------- */
.floating {
  position: fixed;
  right: clamp(0.9rem, 0.5rem + 1vw, 1.6rem);
  bottom: clamp(0.9rem, 0.5rem + 1vw, 1.6rem);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.floating a {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur) var(--ease-out), filter var(--dur) var(--ease-out);
}
.floating a:hover { transform: scale(1.08); filter: brightness(1.08); }
.floating svg { width: 26px; height: 26px; }
.floating__wa { background: #25D366; }
.floating__tel { background: var(--blue-600); }

/* Barra de acción móvil */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: none;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
}
.mobile-bar .btn {
  flex: 1;
  min-width: 0;                /* permite encoger dentro del flex */
  padding: 0.85rem 0.75rem;
  font-size: 0.85rem;
  white-space: nowrap;         /* «Agendar cita» no debe partirse en dos */
}
@media (max-width: 340px) {
  .mobile-bar .btn { font-size: 0.78rem; padding-inline: 0.5rem; }
}

/* --------------------------------------------------------------------------
   18. Menú móvil
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--navy-900);
  color: #fff;
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.mobile-nav__close {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
}
.mobile-nav__close svg { width: 20px; height: 20px; }
.mobile-nav__list { list-style: none; padding: 0; margin: 0 0 var(--sp-6); }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav__list a {
  display: block;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.mobile-nav__list .sub-menu {
  position: static; opacity: 1; visibility: visible; transform: none;
  background: transparent; border: 0; box-shadow: none; padding: 0 0 0.75rem 0.9rem; min-width: 0;
}
.mobile-nav__list .sub-menu a { font-size: 0.95rem; font-weight: 400; color: #A9BDD4; padding: 0.5rem 0; }
.mobile-nav__list .sub-menu li { border: 0; }
.mobile-nav__foot { display: grid; gap: 0.7rem; }

/* --------------------------------------------------------------------------
   19. Animaciones de entrada (scroll reveal)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Aparición escalonada de hijos */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal-group].is-visible > * { opacity: 1; transform: none; }
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 450ms; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 540ms; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 630ms; }

/* Parallax suave */
[data-parallax] { will-change: transform; }

/* --------------------------------------------------------------------------
   20. Utilidades
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--sp-7); font-size: var(--fs-xl); }
.prose h3 { margin-top: var(--sp-6); font-size: var(--fs-lg); }
.prose > *:first-child { margin-top: 0; }

.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-family: var(--font-display);
}
.pill--accent { background: var(--crimson-050); color: var(--crimson-600); }

.note-box {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: var(--blue-050);
  border-left: 4px solid var(--blue-500);
  font-size: var(--fs-sm);
}
.note-box strong { color: var(--navy-800); }

/* --------------------------------------------------------------------------
   21. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav__list, .header__cta .btn--ghost { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 700px) {
  .topbar__list li:not(.topbar__phone) { display: none; }
  .floating { bottom: 5.2rem; }
  .mobile-bar { display: flex; }
  .header__cta .btn { display: none; }
  .site-footer { padding-bottom: 6rem; }
  .hero__controls { bottom: 1.1rem; }
  .hero__scroll { display: none; }
}

/* --------------------------------------------------------------------------
   22. Accesibilidad — movimiento reducido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  .hero__slide.is-active .hero__media { animation: none; transform: scale(1.02); }
  .ecg-divider path { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   23. Impresión
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .topbar, .floating, .mobile-bar, .hero__controls, .site-footer nav { display: none !important; }
  body { color: #000; background: #fff; }
  .hero { min-height: auto; color: #000; background: #fff; }
  .hero__slides { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}