/* ===========================================================================
   LA MARCA, EN UN SOLO SITIO.

   EL PROBLEMA QUE RESUELVE

   La web tenia TRES paletas que decian ser la misma. La portada llamaba al
   verde de la marca «--accent» y valia #0B7D85; la pagina de planes lo
   llamaba «--teal» y valia #087c84; la guia lo llamaba «--marca». Tres
   nombres, y dos verdes que no son el mismo verde.

   Nadie lo nota mirando una pagina. Se nota al pasar de una a otra: la marca
   cambia un poco de tono y el sitio se siente hecho a pedazos, que es
   justo lo que un medico no quiere sentir cuando decide a quien confiarle los
   expedientes de sus pacientes.

   Aqui viven los colores de verdad. Cada pagina conserva los nombres que ya
   usaba, pero ahora todos apuntan al mismo color.

   Y CINCO PAGINAS NO TENIAN MODO OSCURO

   Planes, prueba, privacidad, terminos y licencia se quedaban en blanco
   deslumbrante cuando el visitante trae el telefono en oscuro. Venia de la
   portada, que si lo tiene, y le daba un fogonazo. Ahora lo tienen todas.

   LO QUE NO SE HACE AQUI, A PROPOSITO

   · No se cambia la tipografia por una de moda. La letra del sistema se ve
     nativa en la computadora del medico y no cuesta ni un byte de descarga.
     Ademas las reglas de seguridad del sitio prohiben traer letras de fuera.
   · Ni cristales, ni negro absoluto, ni tipografia gigante de agencia. Esto
     vende un expediente clinico, no un portafolio: la confianza vale mas que
     el espectaculo.
   =========================================================================== */

:root{
  /* Se declara CLARO aqui y OSCURO abajo, en cada bloque donde de verdad se
     aplica. Ponerlo de entrada como «light dark» hacia que el navegador
     pintara el texto por defecto en blanco cuando el sistema esta en oscuro,
     aunque la pagina se hubiera fijado a claro a proposito. */
  color-scheme: light;

  /* --- Los colores de verdad. Todo lo demas apunta aqui. --- */
  --acento:#0B7D85;        /* el verde de la marca */
  --acento-fuerte:#075E64;
  --acento-suave:#DDF0F1;
  --tinta:#0E1F24;         /* el texto principal */
  --tinta-media:#51656B;   /* lo secundario */
  --tinta-tenue:#62747A;
  --linea:#DCE6E7;
  --linea-fuerte:#C8D6D7;
  --papel:#FFFFFF;         /* las tarjetas */
  --papel-2:#F4F8F8;
  --fondo:#F3F7F7;
  --oro:#8A5A12;
  --bien:#1F8F52;

  /* La curva del movimiento. Sale rapido y frena despacio, como una puerta
     bien montada. Una transicion recta se nota mecanica. */
  --curva:cubic-bezier(.2,.8,.3,1);
  --curva-salida:cubic-bezier(.23,1,.32,1);   /* entra y sale */
  --curva-vaiven:cubic-bezier(.77,0,.175,1);  /* se mueve por la pantalla */

  /* Las sombras llevan el tono de la marca, no negro puro. Una sombra negra
     sobre un fondo con color se ve sucia. */
  --sombra:0 1px 2px rgba(12,32,36,.05), 0 10px 30px rgba(12,32,36,.08);
  --sombra-alta:0 2px 4px rgba(12,32,36,.06), 0 18px 44px rgba(12,32,36,.12);
}

/* En penumbra. Mismo verde aclarado para que siga leyendose, y ningun negro
   absoluto: el negro puro sobre pantalla cansa y se ve barato. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --acento:#31B4BA; --acento-fuerte:#4CC7CC; --acento-suave:#0E3033;
    --tinta:#E9F1F1; --tinta-media:#9DB1B4; --tinta-tenue:#778C90;
    --linea:#233639; --linea-fuerte:#31474C;
    --papel:#111E20; --papel-2:#162427; --fondo:#0A1315;
    --oro:#E0A64B; --bien:#4BC57F;
    --sombra:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
    --sombra-alta:0 2px 6px rgba(0,0,0,.4), 0 20px 52px rgba(0,0,0,.55);
  }
}
/* Y cuando el visitante lo elige a mano, gana su eleccion sobre la del
   sistema, en los dos sentidos. */
:root[data-theme="dark"]{
  color-scheme:dark;
    --acento:#31B4BA; --acento-fuerte:#4CC7CC; --acento-suave:#0E3033;
  --tinta:#E9F1F1; --tinta-media:#9DB1B4; --tinta-tenue:#778C90;
  --linea:#233639; --linea-fuerte:#31474C;
  --papel:#111E20; --papel-2:#162427; --fondo:#0A1315;
  --oro:#E0A64B; --bien:#4BC57F;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.4);
  --sombra-alta:0 2px 6px rgba(0,0,0,.4), 0 20px 52px rgba(0,0,0,.55);
}

/* ===========================================================================
   EL ACABADO
   Lo que separa una pagina que funciona de una que se siente cuidada. Todo
   con «transform» y «opacity», que son las dos unicas cosas que un telefono
   puede mover sin tirones.
   =========================================================================== */

/* --- Que las cosas asomen al llegar a ellas ---
   Un movimiento corto al entrar marca donde empieza cada bloque. CORTO de
   verdad: si tarda, deja de ser vida y se vuelve espera.
   La clase la pone el JavaScript, nunca el HTML: si el JavaScript no corre,
   no hay nada escondido que alguien tenga que volver a enseñar. Una animacion
   rota jamas puede dejar la pagina en blanco. */
.asoma{opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--curva), transform .5s var(--curva)}
.asoma.dentro{opacity:1; transform:none}

/* --- El foco del teclado ---
   Hay quien navega sin raton, por costumbre o porque no puede usarlo. Sin
   esto, esa persona no sabe donde esta parada. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--acento); outline-offset:3px; border-radius:6px
}

/* --- LOS BOTONES, VIVOS ---
   Tres estados y cada uno dice una cosa distinta:
     · quieto   — aqui hay algo
     · con el raton encima — y se puede apretar
     · apretado — ya te oi
   Un pixel de subida al pasar por encima y la sombra que crece un poco: la
   cantidad justa para que parezca que se separa del papel. Al apretarlo baja
   por debajo de su sitio y la sombra se aplasta, como una tecla de verdad. */
.btn, .button, .boton, .ira, .atajo, .cta a, button{
  transition:transform .14s var(--curva-salida),
             box-shadow .14s var(--curva-salida),
             background-color .14s ease,
             border-color .14s ease,
             color .14s ease
}

@media (hover:hover) and (pointer:fine){
  .btn:hover, .button:hover, .boton:hover, .ira:hover, .atajo:hover, .cta a:hover{
    transform:translateY(-1px)
  }
  /* El principal levanta mas sombra, porque es el que queremos que se pulse. */
  .btn.primary:hover, .button.primary:hover{
    box-shadow:0 8px 20px rgba(11,125,133,.26)
  }
  .btn:not(.primary):hover, .atajo:hover, .ira:hover{
    box-shadow:0 4px 12px rgba(12,32,36,.10)
  }
}

/* Apretado. Mas corto que lo de arriba -una decima- porque esto tiene que
   ocurrir DENTRO del clic: si tarda, el dedo ya se levanto y la respuesta
   llega cuando ya no sirve. */
.btn:active, .button:active, .boton:active, .ira:active, .atajo:active,
.cta a:active, button:active{
  transform:translateY(1px) scale(.985);
  transition-duration:.1s;
  box-shadow:0 1px 2px rgba(12,32,36,.14)
}

/* Con el teclado no hay «encima», asi que el anillo del foco tambien crece:
   quien tabula tiene derecho a ver lo mismo que quien apunta con el raton. */
.btn:focus-visible, .button:focus-visible, .boton:focus-visible,
.ira:focus-visible, .atajo:focus-visible{
  transform:translateY(-1px)
}

@media (prefers-reduced-motion:reduce){
  /* Se queda el color, se va el pixel. Menos movimiento no es ninguno: el
     boton tiene que seguir contestando. */
  .btn, .button, .boton, .ira, .atajo, .cta a, button,
  .btn:hover, .button:hover, .boton:hover, .ira:hover, .atajo:hover,
  .btn:active, .button:active, .boton:active, .ira:active, .atajo:active,
  button:active, .btn:focus-visible, .button:focus-visible{
    transform:none
  }
}

/* --- Los enlaces de texto ---
   La raya crece desde el borde de abajo en vez de aparecer de golpe. Es el
   unico sitio donde se anima algo que no es un boton, y se nota poco a
   proposito: en un parrafo hay muchos enlaces y si todos saltan, molesta. */
.pie-mapa a, .pie-cols a{
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .18s var(--curva-salida), opacity .14s ease;
  text-decoration:none
}
@media (hover:hover) and (pointer:fine){
  .pie-mapa a:hover, .pie-cols a:hover{background-size:100% 1px; opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .pie-mapa a, .pie-cols a{transition:none}
  .pie-mapa a:hover, .pie-cols a:hover{background-size:100% 1px}
}

/* --- Saltar al contenido ---
   Lo primero que encuentra quien usa teclado o lector de pantalla son los
   veinte enlaces del menu, en cada pagina. Este los salta. Solo aparece
   cuando de verdad se esta usando el teclado. */
.saltar{position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--tinta); color:var(--papel); padding:12px 18px;
  border-radius:0 0 10px 0; font-weight:700; text-decoration:none}
.saltar:focus{left:0}

/* --- Numeros que no bailan ---
   En una tabla de precios, las cifras con anchos distintos descuadran las
   columnas. Con esto cada digito ocupa lo mismo. */
.precio, .price, .amt, .monto, table td, table th, kbd{
  font-variant-numeric:tabular-nums
}

/* --- Que no quede una palabra sola ---
   Un titular que termina con una palabra huerfana en su propia linea se ve
   descuidado. El navegador reparte mejor si se lo pides. */
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}

/* --- Ir a un ancla sin dar el salto --- */
html{scroll-behavior:smooth}

/* --- Quien pidio menos movimiento, no lo tiene ---
   No es un capricho: hay personas a las que el movimiento en pantalla les
   provoca mareo de verdad. Se respeta lo que pidieron en su sistema. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .asoma{opacity:1; transform:none; transition:none}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important
  }
}


/* ===========================================================================
   EL TEXTO LARGO
   La guia, seguridad, privacidad y terminos. Paginas de miles de palabras que
   se leian como un muro: tenian sus titulos, pero nada separaba un apartado
   del siguiente, asi que no se veia donde acababa uno y empezaba otro.
   Solo aplica a <main class="texto">, asi que la portada, planes y el centro
   de ayuda se quedan con lo suyo.
   =========================================================================== */

/* Cada apartado empieza con una raya corta del color de la marca. Es lo que
   convierte un muro en capitulos: el ojo encuentra donde volver. */
.texto h2{position:relative; padding-top:22px; margin-top:44px}
.texto h2::before{
  content:""; position:absolute; top:0; left:0;
  width:38px; height:3px; border-radius:2px;
  background:var(--acento)
}
.texto h2:first-of-type{margin-top:28px}

/* El primer parrafo, mas grande. Es el que decide si se sigue leyendo. */
.texto > p:first-of-type,
.texto .entradilla{
  font-size:1.08em; line-height:1.65; color:var(--tinta-media)
}

/* LAS TABLAS.
   Eran filas con una raya debajo. Una tabla de datos necesita que se distinga
   la cabecera y que la vista no se pierda de fila: encabezado teñido y filas
   alternas. Y numeros de ancho fijo, para que las columnas no bailen. */
.texto table{
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--linea); border-radius:12px; overflow:hidden;
  font-variant-numeric:tabular-nums
}
.texto thead th, .texto tr:first-child th{
  background:var(--acento-suave); color:var(--tinta);
  font-size:12.5px; text-transform:uppercase; letter-spacing:.5px;
  text-align:left; padding:11px 13px;
  border-bottom:1px solid var(--linea-fuerte)
}
.texto tbody tr:nth-child(even) td{background:var(--papel-2)}
.texto td{border-bottom:1px solid var(--linea)}
.texto tbody tr:last-child td{border-bottom:0}

/* Las listas, con el punto del color de la marca y algo de aire entre
   renglones. Una lista apretada se lee como un parrafo con rayas. */
.texto ul, .texto ol{padding-left:22px}
.texto li{margin-bottom:9px}
.texto li::marker{color:var(--acento)}

/* Lo remarcado, un poco mas oscuro que el texto: si «negrita» y «normal» se
   ven igual de oscuros, la negrita no marca nada. */
.texto strong, .texto b{color:var(--tinta)}