/* ==========================================================================
   Dr. Diego Agustini — capa de marca
   Colores, tipografías y las piezas que se repiten en todo el sitio: el logo,
   las ondas y el movimiento.

   Los colores están sacados píxel a píxel de la tarjeta y del cartel de
   vidriera que pasó el consultorio (ver _referencia/): el azul de la D, el
   turquesa de la cinta y el visón de la A.

   REGLA DE ORO DEL MOVIMIENTO: solo se animan `transform` y `opacity`. Son
   las dos cosas que el navegador resuelve en la placa de video sin volver a
   calcular la página. Animar anchos, sombras o desenfoques es lo que hace
   que un sitio se sienta pesado en un celular, y acá no se hace en ningún
   lado.
   ========================================================================== */

:root{
  /* ── Azules — de la D y del cartel ──────────────────────────────────── */
  --azul-abismo:#002A55;
  --azul:#08386F;          /* la D del logo                              */
  --azul-medio:#1565A8;
  --azul-vivo:#1393CE;     /* la A del cartel de vidriera                */
  --azul-claro:#DCEAF6;
  --azul-humo:#F3F8FC;

  /* ── Turquesa — la cinta que cruza el monograma ─────────────────────── */
  --agua-hondo:#1E7F97;
  --agua:#2C9FB7;
  --agua-clara:#63C0D2;
  --agua-humo:#E8F5F8;

  /* ── Visón — la A, el perfil y los filetes ──────────────────────────── */
  --vison-hondo:#8A7C70;
  --vison:#A2958A;
  --vison-claro:#C6B5A6;
  --vison-humo:#F5F0EB;

  /* ── Neutros ────────────────────────────────────────────────────────── */
  --blanco:#FFFFFF;
  --papel:#F8FAFC;
  --linea:#E0E8F0;
  --linea-tibia:#EBE4DC;   /* la versión visón de la línea               */
  --gris:#67788A;
  --gris-claro:#98A8B8;
  --carbon:#0E2033;

  /* ── Estados de la agenda (los colores que pidió el consultorio) ────── */
  --dia-libre:#2E9E6B;     /* verde  · generado y sin nadie anotado      */
  --dia-parcial:#2F6FD0;   /* azul   · quedan lugares                    */
  --dia-lleno:#D2413F;     /* rojo   · completo                          */
  --dia-bloqueado:#1B2733; /* negro  · bloqueado a mano                  */
  --dia-singenerar:#B4C1CD;/* gris   · todavía no se abrió la agenda     */

  /* ── Semáforo de avisos ─────────────────────────────────────────────── */
  --ok:#1E8E5A;
  --alerta:#B8791B;
  --error:#C0392B;

  /* ── Tipografías ────────────────────────────────────────────────────── */
  --serif:'Playfair Display', 'Times New Roman', serif;
  --sans:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Formas y movimiento ────────────────────────────────────────────── */
  --radio:14px;
  --radio-lg:22px;
  --radio-xl:30px;
  --sombra:0 1px 2px rgba(8,56,111,.05), 0 10px 30px -18px rgba(8,56,111,.35);
  --sombra-alta:0 2px 6px rgba(8,56,111,.06), 0 26px 60px -30px rgba(8,56,111,.5);
  --sombra-vison:0 10px 30px -20px rgba(162,149,138,.75);
  --curva:cubic-bezier(.22,.61,.36,1);
  --curva-suave:cubic-bezier(.34,1.3,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--carbon);
     font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}

/* ── Iconos ───────────────────────────────────────────────────────────
   Miden en relación al texto que los acompaña, así quedan proporcionados
   en un título, en un botón o en una línea de ayuda sin regla aparte.
   Sin esto, un <svg> con viewBox pero sin tamaño lo dibuja el navegador a
   300x150 y el max-width de arriba lo estira a todo el ancho: iconos de
   800 px dentro de una tarjeta.                                          */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.17em}
a{color:var(--agua-hondo)}

/* ══════════════════════════════════════════════════════════════════════
   EL LOGO
   Está vectorizado del original (ver includes/logo.php). Cada pieza —la D,
   la cinta, la A, el perfil y las cuatro gotas— es un <use> aparte, así se
   pinta y se anima por separado.

   El color NO se pone con `fill` sino con `color`: los trazos usan
   currentColor y `color` se hereda hacia adentro del <use>. Gracias a eso,
   poner el logo en blanco sobre el pie es una línea de CSS.
   ══════════════════════════════════════════════════════════════════════ */

/* El bloque que declara los trazos no ocupa lugar ni se lee en voz alta */
.logoDefs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

.logo{display:block;height:auto}
.logo--monograma {width:120px}
.logo--horizontal{width:250px}
.logo--lockup    {width:180px}
.logo--completo  {width:230px}
.logo--sello     {width:300px}

/* ── Los colores de la marca ──────────────────────────────────────────── */
.logo__d     {color:var(--azul)}
.logo__cinta {color:var(--agua)}
.logo__a     {color:var(--vison-claro)}
.logo__perfil{color:var(--vison-hondo)}
.logo__gota  {color:var(--agua)}
.logo__aro   {stroke:var(--vison-claro)}

.logo__nombre {font:500 42px/1 var(--serif); fill:var(--azul)}
.logo__bajada {font:600 15px/1 var(--sans);  fill:var(--azul); letter-spacing:.4px}
.logo--sello    .logo__nombre{font-size:39px}
.logo--horizontal .logo__nombre{font-size:47px}
.logo--horizontal .logo__bajada{font-size:16px}

.logo__filete line{stroke-width:1.5}
.logo__filete-a{stroke:var(--agua)}
.logo__filete-b{stroke:var(--vison-claro)}
.logo__filete-punto{fill:var(--agua)}

/* ── El logo entrando ─────────────────────────────────────────────────
   La cinta baja como si la dibujaran, la D y la A entran desde sus lados,
   el perfil se descubre y las gotas caen de a una. Todo con transform y
   opacity: no cuesta nada aunque el logo sea grande.                      */
@media (prefers-reduced-motion:no-preference){
  .logo--animado .logo__cinta,
  .logo--animado .logo__perfil,
  .logo--animado .logo__gota{transform-box:fill-box}

  .logo--animado .logo__cinta{transform-origin:top center;
      animation:cintaBaja 1.15s var(--curva) .1s both}
  .logo--animado .logo__d{animation:entraIzq .85s var(--curva) .34s both}
  .logo--animado .logo__a{animation:entraDer .85s var(--curva) .5s both}
  .logo--animado .logo__perfil{transform-origin:top center;
      animation:perfilSurge .9s var(--curva) 1.02s both}

  .logo--animado .logo__gota{transform-origin:center;
      animation:gotaCae .5s var(--curva-suave) both}
  .logo--animado .logo__gota--1{animation-delay:1.32s}
  .logo--animado .logo__gota--2{animation-delay:1.44s}
  .logo--animado .logo__gota--3{animation-delay:1.56s}
  .logo--animado .logo__gota--4{animation-delay:1.68s}

  /* El aro del sello se dibuja de un trazo: 2·π·219 ≈ 1376 */
  .logo--animado .logo__aro{stroke-dasharray:1376;stroke-dashoffset:1376;
      animation:trazar 2.2s var(--curva) .05s forwards}

  .logo--animado .logo__nombre,
  .logo--animado .logo__filete,
  .logo--animado .logo__bajada{opacity:0;animation:aparecer .8s var(--curva) forwards}
  .logo--animado .logo__nombre{animation-delay:1.02s}
  .logo--animado .logo__filete{animation-delay:1.18s}
  .logo--animado .logo__bajada{animation-delay:1.34s}
}

@keyframes cintaBaja  {from{transform:scaleY(.02);opacity:.25} to{transform:none;opacity:1}}
@keyframes perfilSurge{from{transform:scaleY(0);opacity:0}     to{transform:none;opacity:1}}
@keyframes entraIzq   {from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:none}}
@keyframes entraDer   {from{opacity:0;transform:translateX(16px)}  to{opacity:1;transform:none}}
@keyframes gotaCae    {from{opacity:0;transform:translateY(-9px) scale(.3)} to{opacity:1;transform:none}}
@keyframes trazar     {to{stroke-dashoffset:0}}
@keyframes aparecer   {from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:none}}
@keyframes surgir     {from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none}}
@keyframes surgirChico{from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none}}
@keyframes escalar    {from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none}}
@keyframes flotar     {0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
@keyframes latir      {0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.9;transform:scale(1.04)}}
@keyframes girar      {to{transform:rotate(360deg)}}
@keyframes deriva     {from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}
@keyframes respirar   {0%,100%{transform:scale(1) translate3d(0,0,0)}
                       50%{transform:scale(1.08) translate3d(2%,-2%,0)}}

/* ══════════════════════════════════════════════════════════════════════
   LAS ONDAS — la firma visual de la marca
   ══════════════════════════════════════════════════════════════════════ */
.ondas{display:block;width:100%;height:auto;pointer-events:none}
.ondas__vison{fill:var(--vison-claro);opacity:.30}
.ondas__a    {fill:#BFD6EA;opacity:.55}
.ondas__b    {fill:#9FC1DE;opacity:.55}
.ondas__c    {fill:#7FAAD2;opacity:.45}
.ondas__hilo {stroke:var(--vison);opacity:.55}

/* La franja: dos copias de las ondas puestas al hilo, deslizándose muy
   despacio. Con `transform` puro no cuesta nada, y da la sensación de agua
   sin que nadie note que se está moviendo.                                */
.ondasFranja{position:relative;overflow:hidden;line-height:0;pointer-events:none}
.ondasFranja__cinta{display:flex;width:200%}
.ondasFranja__cinta > .ondas{width:50%;flex:none}
@media (prefers-reduced-motion:no-preference){
  .ondasFranja__cinta{animation:deriva 44s linear infinite}
  /* La capa de atrás va más lenta: da profundidad sin pintar nada de más */
  .ondasFranja--lenta .ondasFranja__cinta{animation-duration:72s}
}

/* ══════════════════════════════════════════════════════════════════════
   FONDOS
   ══════════════════════════════════════════════════════════════════════ */
/* Manchas de color que respiran. Son degradados radiales, NO desenfoques:
   un blur grande obliga al navegador a re-dibujar en cada cuadro y en un
   celular de gama baja se nota. Esto se ve casi igual y sale gratis.       */
.luz{position:fixed;border-radius:50%;pointer-events:none;z-index:0;
     will-change:transform}
.luz--agua {background:radial-gradient(circle,rgba(99,192,210,.34),rgba(99,192,210,0) 70%)}
.luz--azul {background:radial-gradient(circle,rgba(21,101,168,.26),rgba(21,101,168,0) 70%)}
.luz--vison{background:radial-gradient(circle,rgba(162,149,138,.28),rgba(162,149,138,0) 70%)}

/* La malla molecular de sus placas */
.malla{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--agua);
       opacity:.42;
       -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 16%, transparent 76%);
               mask-image:radial-gradient(120% 90% at 50% 40%, #000 16%, transparent 76%)}
.malla svg{width:100%;height:100%}

/* ══════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════ */
.btn{position:relative;overflow:hidden;
     display:inline-flex;align-items:center;justify-content:center;gap:9px;
     padding:14px 26px;border:0;border-radius:999px;cursor:pointer;
     font:600 15px/1 var(--sans);letter-spacing:.2px;text-decoration:none;
     transition:transform .25s var(--curva), box-shadow .25s var(--curva),
                background .25s var(--curva), color .25s var(--curva)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* El destello que cruza al pasar el mouse: es un pseudo-elemento que se
   mueve con translate. No repinta nada del botón.                         */
.btn::after{content:'';position:absolute;top:0;bottom:0;width:45%;
            background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
            transform:translateX(-260%) skewX(-18deg);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .btn:hover::after{transition:transform .75s var(--curva);transform:translateX(320%) skewX(-18deg)}
}
.btn--linea::after{background:linear-gradient(100deg,transparent,rgba(44,159,183,.16),transparent)}

.btn--primario{background:linear-gradient(135deg,var(--azul),var(--azul-medio));color:#fff;
               box-shadow:0 10px 26px -12px rgba(8,56,111,.75)}
.btn--primario:hover{box-shadow:0 16px 32px -12px rgba(8,56,111,.8)}
.btn--agua{background:linear-gradient(135deg,var(--agua-hondo),var(--agua-clara));color:#fff;
           box-shadow:0 10px 26px -12px rgba(44,159,183,.8)}
.btn--agua:hover{box-shadow:0 16px 32px -12px rgba(44,159,183,.85)}
.btn--vison{background:linear-gradient(135deg,var(--vison-hondo),var(--vison-claro));color:#fff;
            box-shadow:0 10px 26px -12px rgba(138,124,112,.8)}
.btn--linea{background:transparent;color:var(--azul);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn--linea:hover{box-shadow:inset 0 0 0 1.5px var(--agua);color:var(--agua-hondo)}
.btn--vison-linea{background:transparent;color:var(--vison-hondo);
                  box-shadow:inset 0 0 0 1.5px var(--linea-tibia)}
.btn--vison-linea:hover{box-shadow:inset 0 0 0 1.5px var(--vison);color:var(--vison-hondo)}
.btn--grande{padding:17px 34px;font-size:16px}
.btn svg{width:19px;height:19px;flex:none;position:relative}

/* ══════════════════════════════════════════════════════════════════════
   PIEZAS CHICAS
   ══════════════════════════════════════════════════════════════════════ */
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;
      background:var(--blanco);box-shadow:inset 0 0 0 1px var(--linea);
      font:600 12.5px/1 var(--sans);letter-spacing:1.1px;text-transform:uppercase;
      color:var(--azul);white-space:nowrap;text-decoration:none;
      transition:transform .3s var(--curva), box-shadow .3s var(--curva),
                 color .3s var(--curva)}
.chip:hover{transform:translateY(-3px);color:var(--agua-hondo);
            box-shadow:inset 0 0 0 1px var(--agua-clara), 0 10px 20px -12px rgba(44,159,183,.7)}
.chip__punto{width:6px;height:6px;border-radius:50%;background:var(--agua);flex:none;
             transition:transform .3s var(--curva-suave)}
.chip:hover .chip__punto{transform:scale(1.5)}
.chip--vison{color:var(--vison-hondo);box-shadow:inset 0 0 0 1px var(--linea-tibia)}
.chip--vison .chip__punto{background:var(--vison)}

/* ══════════════════════════════════════════════════════════════════════
   TEXTOS
   ══════════════════════════════════════════════════════════════════════ */
.antetitulo{font:700 12.5px/1 var(--sans);letter-spacing:4.5px;text-transform:uppercase;
            color:var(--agua-hondo);margin:0}
.antetitulo--vison{color:var(--vison-hondo)}
.titulo{font:500 clamp(30px,5.4vw,54px)/1.14 var(--serif);color:var(--azul);margin:0;
        letter-spacing:-.5px}
.titulo em{font-style:italic;color:var(--agua-hondo)}
.titulo b{font-weight:500;color:var(--vison-hondo)}
.bajada{font:400 clamp(15.5px,2.1vw,18.5px)/1.7 var(--sans);color:var(--gris);margin:0}

/* Subrayado de marca: una línea que se dibuja sola al aparecer */
.subrayado{position:relative;display:inline-block}
.subrayado::after{content:'';position:absolute;left:0;right:0;bottom:-.12em;height:2px;
                  background:linear-gradient(90deg,var(--agua),var(--vison));
                  transform:scaleX(0);transform-origin:left;border-radius:2px}
@media (prefers-reduced-motion:no-preference){
  .visible .subrayado::after,.subrayado.visible::after{
      transition:transform .9s var(--curva) .25s;transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){ .subrayado::after{transform:scaleX(1)} }

/* ══════════════════════════════════════════════════════════════════════
   Respeta a quien pidió menos movimiento en su sistema
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important;scroll-behavior:auto !important}
}