/* =====================================================================
   Estilos compartidos de las páginas de contenido clínico
   Consultorio Dra. Mónica María Medina Fajardo — Urología, Bogotá

   CSS estático, sin dependencias externas. Se carga en ~4 KB frente a
   los ~350 KB de JavaScript que implicaba el CDN de Tailwind.
   ===================================================================== */

:root {
  --navy:    #0a0f1e;
  --panel:   #121826;
  --panel-2: #1a2436;
  --line:    rgba(255,255,255,.10);
  --teal:    #3d8a84;
  --teal-l:  #5aada6;
  --txt:     #e8edf4;
  --body:    #d3dce8;
  --mut:     #a8b4c4;
  --warn:    #e8b04b;
  --alert:   #e06c6c;
  --radius:  10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font: 16px/1.75 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--navy);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-l); }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--teal-l);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Accesibilidad --- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--teal); color: #fff; padding: 12px 20px;
  border-radius: 0 0 10px 0; font-weight: 600;
}
.skip:focus { left: 0; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Cabecera --- */
header.sitio {
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
  position: sticky; top: 0; z-index: 30;
  background: rgba(10,15,30,.93);
  backdrop-filter: blur(12px);
}
header.sitio .in {
  max-width: 1040px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--txt); }
.marca .m {
  width: 38px; height: 38px; border-radius: 50%; background: var(--teal);
  display: grid; place-items: center; font-family: Georgia, serif; font-size: 19px; flex: 0 0 auto;
}
.marca b { font-weight: 600; font-size: 15px; display: block; line-height: 1.3; }
.marca .rol { font-size: 11px; color: var(--teal-l); text-transform: uppercase; letter-spacing: .14em; }

.nav-cta {
  background: var(--teal); color: #fff !important; text-decoration: none;
  padding: 10px 20px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--teal-l); }

/* --- Migas de pan --- */
.migas { max-width: 1040px; margin: 0 auto; padding: 18px 24px 0; font-size: 13.5px; color: var(--mut); }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }
.migas span { margin: 0 7px; opacity: .5; }

/* --- Contenido --- */
main { max-width: 780px; margin: 0 auto; padding: 32px 24px 80px; }

h1 {
  font-family: Georgia, serif; font-weight: 600;
  font-size: clamp(30px, 5.5vw, 46px); line-height: 1.18; margin-bottom: 18px;
}
.entradilla {
  font-size: 18.5px; line-height: 1.7; color: var(--body);
  padding-bottom: 26px; margin-bottom: 10px; border-bottom: 1px solid var(--line);
}
.firma { font-size: 13.5px; color: var(--mut); margin-bottom: 40px; }
.firma a { text-decoration: none; }

/* El corazón del formato Answer Sandwich:
   H2 = la pregunta tal como la haría un paciente
   .respuesta = 40-60 palabras que la IA puede extraer y citar */
h2 {
  font-family: Georgia, serif; font-weight: 600;
  font-size: clamp(22px, 3.4vw, 29px); line-height: 1.3;
  margin: 52px 0 16px; color: #fff;
}
h3 { font-size: 18px; font-weight: 600; margin: 30px 0 10px; color: var(--teal-l); }

.respuesta {
  background: var(--panel);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; margin-bottom: 20px;
  font-size: 17px; line-height: 1.7; color: var(--txt);
}

p { margin-bottom: 16px; color: var(--body); }
ul, ol { margin: 0 0 18px 22px; }
li { margin-bottom: 9px; color: var(--body); }
strong { color: var(--txt); font-weight: 600; }

/* --- Bloques destacados --- */
.alarma {
  background: rgba(224,108,108,.11);
  border: 1px solid rgba(224,108,108,.45);
  border-radius: var(--radius); padding: 20px 22px; margin: 30px 0;
}
.alarma h3 { color: var(--alert); margin-top: 0; }
.alarma p:last-child, .alarma ul:last-child { margin-bottom: 0; }

.nota {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 22px; margin: 26px 0;
}
.nota p:last-child { margin-bottom: 0; }

/* --- Tablas comparativas: muy citadas por motores generativos --- */
.tabla-wrap { overflow-x: auto; margin: 26px 0; }
table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 480px; }
th, td { text-align: left; padding: 13px 15px; border: 1px solid var(--line); vertical-align: top; }
th { background: var(--panel-2); font-weight: 600; color: var(--txt); }
td { color: var(--body); }
tbody tr:nth-child(odd) { background: rgba(255,255,255,.02); }
caption { text-align: left; color: var(--mut); font-size: 13.5px; padding-bottom: 10px; }

/* --- Llamado a la acción --- */
.cta {
  background: linear-gradient(135deg, rgba(61,138,132,.16), rgba(61,138,132,.05));
  border: 1px solid rgba(61,138,132,.4);
  border-radius: 14px; padding: 30px 28px; margin: 52px 0 0; text-align: center;
}
.cta h2 { margin: 0 0 12px; font-size: 25px; }
.cta p { max-width: 460px; margin: 0 auto 22px; }
.boton {
  display: inline-block; background: var(--teal); color: #fff !important;
  text-decoration: none; padding: 14px 32px; border-radius: 9px;
  font-weight: 600; font-size: 16px;
}
.boton:hover { background: var(--teal-l); }
.cta .aparte { font-size: 13.5px; color: var(--mut); margin: 16px 0 0; }

/* --- Aviso médico obligatorio --- */
.aviso-medico {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.7; color: var(--mut);
}

/* --- Enlaces relacionados --- */
.relacionados { margin-top: 44px; }
.relacionados h2 { font-size: 21px; margin-bottom: 16px; }
.relacionados ul { list-style: none; margin: 0; }
.relacionados li { margin-bottom: 10px; }
.relacionados a {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 18px; text-decoration: none;
  color: var(--txt); font-weight: 500;
}
.relacionados a:hover { border-color: var(--teal); background: var(--panel-2); }
.relacionados a small { display: block; color: var(--mut); font-weight: 400; margin-top: 3px; }

/* --- Pie --- */
footer.sitio {
  border-top: 1px solid var(--line); padding: 36px 24px;
  color: var(--mut); font-size: 14px;
}
footer.sitio .in {
  max-width: 1040px; margin: 0 auto;
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: space-between;
}
footer.sitio a { text-decoration: none; }

/* --- Salida rápida ---------------------------------------------------------
   Móvil primero, y aquí importa más que en la portada: estas son las páginas
   que alguien consulta desde un teléfono compartido —disfunción eréctil,
   sangre en la orina—, así que el botón tiene que estar donde llega el pulgar
   sin recolocar la mano, y sin taparle el texto que está leyendo.

   Bajo 1024px es un círculo en la esquina inferior derecha. El texto sigue en
   el HTML para los lectores de pantalla; solo se oculta visualmente con
   font-size:0, y la aspa se dibuja con ::before.
   Desde 1024px vuelve la pestaña vertical del borde derecho, que en escritorio
   no estorba y se reconoce mejor. */
#salida-rapida {
  position: fixed; right: 16px; bottom: 16px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--mut); cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  font-size: 0;
}
#salida-rapida::before {
  content: '\00d7';
  font-size: 26px; line-height: 1; font-weight: 400;
}
#salida-rapida:hover { color: #fff; background: var(--panel-2); }

@media (min-width: 1024px) {
  #salida-rapida {
    right: 0; bottom: auto; top: 50%; transform: translateY(-50%);
    width: auto; height: auto; border-radius: 14px 0 0 14px; border-right: 0;
    padding: 22px 10px; box-shadow: none;
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 11px; text-transform: uppercase; letter-spacing: .18em; font-weight: 600;
  }
  #salida-rapida::before { content: none; }
}

@media (max-width: 600px) {
  main { padding: 24px 20px 60px; }
}