/* ==================================================================
   DENTAL CARE FAMILY SRL · Sitio publico — mundo "clinica clara"

   Direccion fijada por el usuario mediante referencia visual. El brief
   manda sobre cualquier otra consideracion.

   Blanco y bruma azul como terreno, azul marino como tinta, un cielo
   para la accion. Titulares en versales alternando ligera y negrita
   dentro de la misma linea. Composicion de bento: piezas de distinto
   tamano y proporcion sobre una retícula generosa, esquinas de 18px,
   microetiquetas en versalitas muy espaciadas.

   Esta hoja solo gobierna el sitio publico. El panel clinico y el
   portal conservan su propio sistema.
   ================================================================== */

.mos{
  /* --- Paleta --- */
  --papel:#FFFFFF;      /* terreno                                    */
  --bruma:#EEF1FA;      /* baldosa clara, la superficie mas frecuente */
  --hielo:#DAE1F2;      /* baldosa clara con mas cuerpo               */
  --marino:#152868;     /* tinta y superficie oscura                  */
  --azul:#1F3A93;       /* accion, acento, indicadores                */
  --gris:#59648A;       /* texto secundario  5.1:1 sobre bruma        */
  --linea:#DDE3F1;      /* filetes                                    */

  --r:18px;             /* radio de pieza                             */
  --r-sm:12px;

  background:var(--papel);
  color:var(--marino);
  font-family:'Onest','Schibsted Grotesk',-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
}

/* ---------- Titular: versales con peso alternado ---------- */
/* La familia se declara aqui: el h1 global de app.css impone Bricolage,
   que no tiene peso 300, y el navegador lo sintetizaba perdiendo el
   contraste entre ligera y negrita que define este titular. */
.mos .titular{
  font-family:'Onest','Schibsted Grotesk',sans-serif;
  font-weight:300; text-transform:uppercase; letter-spacing:-.022em;
  line-height:1.02; color:var(--marino);
}
.mos .titular b, .mos .titular strong{font-weight:700}

/* Titular de seccion, caja baja */
.mos .rotulo{font-family:'Onest','Schibsted Grotesk',sans-serif;
  font-weight:400; letter-spacing:-.03em; line-height:1.06; color:var(--marino)}

/* ---------- Microetiqueta ---------- */
.mos .micro{
  font-family:'Onest','Schibsted Grotesk',sans-serif;
  font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris);
}

/* ---------- Piezas del bento ---------- */
.mos-pieza{border-radius:var(--r); overflow:hidden; position:relative}
.mos-pieza--bruma{background:var(--bruma)}
.mos-pieza--hielo{background:var(--hielo)}
.mos-pieza--marino{background:var(--marino); color:#fff}
.mos-pieza--linea{background:var(--papel); border:1px solid var(--linea)}

/* ---------- Hueco de imagen pendiente de aportar ----------
   Se entrega con la proporcion y el tratamiento definitivos; el
   contenido lo pone la clinica. Se marca para que nadie lo confunda
   con material real.                                                */
.mos-hueco{
  background:
    repeating-linear-gradient(135deg, rgba(21,40,104,.045) 0 10px, transparent 10px 20px),
    var(--bruma);
  border:1px dashed var(--linea);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.mos-hueco span{
  font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gris); padding:14px; max-width:22ch; line-height:1.6;
}

/* ---------- Acciones ---------- */
.mos-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 9px 9px 20px; border-radius:99px; border:1px solid var(--linea);
  background:var(--papel); color:var(--marino);
  font-size:13.5px; font-weight:500; letter-spacing:-.005em; text-decoration:none;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mos-btn .flecha{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--azul); color:#fff; flex:0 0 30px; transition:transform .2s;
}
.mos-btn:hover{border-color:var(--azul); box-shadow:0 6px 22px rgba(31,58,147,.16)}
.mos-btn:hover .flecha{transform:translate(2px,-2px)}
.mos-btn:focus-visible{outline:2px solid var(--azul); outline-offset:3px}
.mos-btn--solido{background:var(--marino); border-color:var(--marino); color:#fff}
.mos-btn--solido:hover{background:#1B2A78}
.mos-btn--plano{padding:11px 20px}
.mos-btn--plano .flecha{display:none}

/* Enlace con flecha volada */
.mos-mas{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--marino); text-decoration:none;
}
.mos-mas:hover{color:var(--azul)}

/* ---------- Etiqueta flotante sobre imagen ---------- */
.mos-tag{
  display:inline-flex; align-items:center; padding:8px 16px; border-radius:99px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--marino);
}
.mos-tag--azul{background:var(--azul); color:#fff}

/* ---------- Carrusel de servicios ---------- */
.mos-carril{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none;
}
.mos-carril::-webkit-scrollbar{display:none}
.mos-carril > *{scroll-snap-align:start; flex:0 0 clamp(238px, 26%, 300px)}
.mos-flecha{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--linea);
  display:grid; place-items:center; background:var(--papel); color:var(--marino);
  cursor:pointer; transition:border-color .2s, color .2s;
}
.mos-flecha:hover{border-color:var(--azul); color:var(--azul)}
.mos-flecha:focus-visible{outline:2px solid var(--azul); outline-offset:2px}

/* ---------- Escalera del recorrido ---------- */
.mos-paso{
  display:block; width:100%; text-align:right; background:none; border:0; cursor:pointer;
  font-size:13px; font-weight:400; color:var(--gris); padding:5px 0;
  transition:color .2s;
}
.mos-paso:hover{color:var(--marino)}
.mos-paso[aria-current]{
  font-size:clamp(34px, 4.4vw, 52px); font-weight:400; letter-spacing:-.03em;
  color:var(--marino); padding:10px 0; line-height:1.05;
}
.mos-paso:focus-visible{outline:2px solid var(--azul); outline-offset:2px; border-radius:6px}

/* ---------- El artefacto: odontograma sobre la bruma ---------- */
.mos-objeto{position:relative}
.mos-objeto .odo-svg .tooth .crown{fill:#fff}
.mos-objeto .odo-svg .tooth .surf{fill:#fff; stroke:#BACDE6; stroke-width:.85}
.mos-objeto .odo-svg .tooth .crown-line{stroke:#8FA8CC; stroke-width:1.2}
.mos-objeto .odo-svg .tooth .fissure{stroke:#AFC3DE}
.mos-objeto .odo-svg .tooth .num{fill:var(--gris); font-weight:500}
.mos-objeto .odo-svg .odo-guia{stroke:#C9D8EC}

/* ---------- Cifra ---------- */
.mos-cifra{font-size:32px; font-weight:600; letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--marino)}

/* ---------- Navegacion ---------- */
.mos-menu{
  display:inline-flex; align-items:center; gap:9px; padding:9px 20px; border-radius:99px;
  border:1px solid var(--linea); background:var(--papel); color:var(--marino);
  font-size:13px; font-weight:500; cursor:pointer; transition:border-color .2s;
}
.mos-menu:hover{border-color:var(--azul)}
.mos-menu:focus-visible{outline:2px solid var(--azul); outline-offset:3px}
.mos-nav a{font-size:13.5px; color:var(--gris); transition:color .18s}
.mos-nav a:hover, .mos-nav a[aria-current]{color:var(--marino)}

/* ---------- Filete ---------- */
.mos-h{border-top:1px solid var(--linea)}

/* Los encabezados del sitio publico no heredan la voz del panel */
.mos h1,.mos h2,.mos h3,.mos h4{font-family:'Onest','Schibsted Grotesk',sans-serif}

/* ==================================================================
   Reserva en linea — el paso de visitante a paciente

   Cuatro decisiones, una por pantalla, con el resumen siempre a la
   vista. La disponibilidad real es lo que convence: se llega a ella
   en el tercer gesto y nunca se aterriza en un dia sin cupo.
   ================================================================== */

/* ---------- Hitos del recorrido ---------- */
.mos-hitos{display:flex;align-items:center;gap:0;flex-wrap:nowrap}
.mos-hito{display:flex;align-items:center;gap:9px;min-width:0}
.mos-hito i{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;
  font-size:11.5px;font-weight:700;font-style:normal;border:1px solid var(--linea);
  background:var(--papel);color:var(--gris);transition:.18s;
}
.mos-hito b{font-size:11.5px;font-weight:500;color:var(--gris);white-space:nowrap;transition:color .18s}
.mos-hito.on i{background:var(--azul);border-color:var(--azul);color:#fff}
.mos-hito.on b{color:var(--marino);font-weight:600}
.mos-hito.ok i{background:var(--marino);border-color:var(--marino);color:#fff}
.mos-hito.ok b{color:var(--marino)}
.mos-hitos hr{flex:1 1 14px;min-width:12px;border:0;border-top:1px solid var(--linea);margin:0 10px}

/* ---------- Opcion elegible (servicio, profesional) ---------- */
.mos-op{
  display:block;width:100%;text-align:left;cursor:pointer;position:relative;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);padding:16px;
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.mos-op:hover{border-color:var(--azul);box-shadow:0 6px 22px rgba(31,58,147,.10)}
.mos-op:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.mos-op.on{border-color:var(--azul);background:var(--bruma);box-shadow:0 0 0 1px var(--azul) inset}
.mos-op.on::after{
  content:'';position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;
  background:var(--azul) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
.mos-op--sugerida{border-color:var(--azul);background:linear-gradient(180deg,var(--bruma),var(--papel))}

/* ---------- Tira de dias ---------- */
.mos-dias{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.mos-dias::-webkit-scrollbar{display:none}
.mos-dia{
  flex:0 0 auto;min-width:58px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--linea);background:var(--papel);text-align:center;transition:.16s;
}
.mos-dia span{display:block;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.mos-dia strong{display:block;font-size:17px;font-weight:600;color:var(--marino);letter-spacing:-.02em;line-height:1.25}
.mos-dia:hover{border-color:var(--azul)}
.mos-dia:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.mos-dia.on{background:var(--marino);border-color:var(--marino)}
.mos-dia.on span{color:rgba(255,255,255,.72)}
.mos-dia.on strong{color:#fff}

/* ---------- Hora libre ---------- */
.mos-horas{display:flex;flex-wrap:wrap;gap:8px}
.mos-hora{
  padding:9px 15px;border-radius:99px;border:1px solid var(--linea);background:var(--papel);
  font-size:13px;font-weight:500;color:var(--marino);cursor:pointer;transition:.16s;
  font-variant-numeric:tabular-nums;
}
.mos-hora:hover{border-color:var(--azul);color:var(--azul)}
.mos-hora:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.mos-hora.on{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}

/* ---------- Aviso dentro del asistente ---------- */
.mos-aviso{
  border-radius:var(--r-sm);padding:13px 15px;font-size:12.5px;line-height:1.55;
  background:var(--bruma);border:1px solid var(--linea);color:var(--marino);
}
.mos-aviso--alto{background:#FFF7ED;border-color:#FBD9A8;color:#8A4B08}
.mos-aviso--mal{background:#FEF2F2;border-color:#F6C6C6;color:#9B1C1C}

/* ---------- Formulario en este mundo ---------- */
.mos .label{font-size:11.5px;font-weight:600;color:var(--marino);letter-spacing:0}
.mos .input,.mos .select,.mos .textarea{
  border-radius:var(--r-sm);border-color:var(--linea);background:var(--papel);color:var(--marino);
}
.mos .input:focus,.mos .select:focus,.mos .textarea:focus{
  border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,58,147,.14);
}
.mos .hint{color:var(--gris)}
.mos .req{color:var(--azul)}

/* ---------- Resumen pegajoso ---------- */
.mos-res b{display:block;font-size:13.5px;font-weight:600;color:var(--marino);letter-spacing:-.01em}
.mos-res span{display:block;font-size:11px;color:var(--gris)}
.mos-res .vacio{color:var(--gris);font-weight:400}

/* ==================================================================
   Paginas interiores — catalogo, equipo y contacto
   ================================================================== */

/* ---------- Ficha: pieza de contenido que lleva a algun sitio ---------- */
.mos-ficha{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  display:flex;flex-direction:column;position:relative;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.mos-ficha:hover{border-color:var(--azul);box-shadow:0 10px 30px rgba(31,58,147,.10);transform:translateY(-2px)}
.mos-ficha:focus-within{border-color:var(--azul)}

/* ---------- Pastilla de filtro ---------- */
.mos-pastilla{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:8px 15px;border-radius:99px;border:1px solid var(--linea);background:var(--papel);
  font-size:12.5px;font-weight:500;color:var(--marino);white-space:nowrap;transition:.16s;
}
.mos-pastilla:hover{border-color:var(--azul)}
.mos-pastilla:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.mos-pastilla.on{background:var(--marino);border-color:var(--marino);color:#fff}
.mos-pastilla em{font-style:normal;color:var(--gris);font-variant-numeric:tabular-nums}
.mos-pastilla.on em{color:rgba(255,255,255,.6)}

/* ---------- Campo de busqueda del catalogo ---------- */
.mos-buscar{position:relative;display:block}
.mos-buscar input{
  width:100%;height:52px;padding:0 118px 0 46px;border-radius:99px;
  border:1px solid var(--linea);background:var(--papel);color:var(--marino);font-size:14px;
  transition:border-color .18s, box-shadow .18s;
}
.mos-buscar input::placeholder{color:var(--gris)}
.mos-buscar input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(31,58,147,.14)}
.mos-buscar > .lupa{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--gris);pointer-events:none}
.mos-buscar > button{position:absolute;right:6px;top:6px;height:40px}

/* ---------- Franja de dias laborables ---------- */
.mos-semana{display:flex;gap:4px}
.mos-semana span{
  flex:1;text-align:center;padding:6px 0;border-radius:9px;
  font-size:10px;font-weight:600;letter-spacing:.06em;
  background:var(--bruma);color:var(--gris);
}
.mos-semana span.abre{background:var(--marino);color:#fff}

/* ---------- Cifra de ficha ---------- */
.mos-dato b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em;color:var(--marino);
  font-variant-numeric:tabular-nums;line-height:1.2}
.mos-dato span{display:block;font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris);margin-top:2px}

/* ---------- Linea de catalogo: nombre, dato, precio, ir ---------- */
/* El desplazamiento al pasar el raton se hace con `transform`: animar el
   relleno obliga al navegador a recalcular la maqueta en cada fotograma. */
.mos-linea{
  display:flex;align-items:center;gap:16px;padding:14px 4px;
  border-bottom:1px solid var(--linea);transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.mos-linea:hover{transform:translateX(8px)}
.mos-linea:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:8px}
.mos-linea .nom{display:block;font-size:14px;font-weight:500;color:var(--marino);letter-spacing:-.01em;line-height:1.35}
.mos-linea .sub{display:block;font-size:11.5px;color:var(--gris);margin-top:2px}
.mos-linea .precio{
  margin-left:auto;font-size:15px;font-weight:600;color:var(--marino);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.mos-linea .ir{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;
  background:var(--bruma);color:var(--gris);transition:background .18s,color .18s;
}
.mos-linea:hover .ir{background:var(--azul);color:#fff}

/* En pantallas estrechas los hijos de rejilla y de caja flexible deben poder
   encogerse: por defecto no bajan de su ancho minimo de contenido y sacaban
   la cabecera fuera de la pantalla a 360 px. */
.mos .grid > *,
.mos .flex > *{min-width:0}
.mos .grid > .shrink-0,
.mos .flex > .shrink-0{min-width:auto}

/* ---------- Formularios de acceso (comparten el mundo del sitio) ----------
   El acceso del personal y del paciente viven en este mundo, no en el panel:
   el foco pasa al azul del sitio y los botones de pildora se estiran a lo ancho
   con la flecha volada a la derecha. */
.mos .input:focus,.mos .select:focus,.mos .textarea:focus{
  border-color:var(--azul); box-shadow:0 0 0 3.5px rgba(31,58,147,.14);
}
.mos-btn.acc-btn{ width:100%; justify-content:space-between; padding-left:22px; }
.acc-cuenta{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; padding:11px 14px; border-radius:var(--r-sm);
  background:var(--papel); border:1px solid var(--linea); transition:border-color .18s, box-shadow .18s; }
.acc-cuenta:hover{ border-color:var(--azul); box-shadow:0 6px 20px rgba(31,58,147,.13); }
.acc-cap{ display:flex; align-items:flex-start; gap:12px; padding:14px;
  border-radius:var(--r); background:var(--papel); border:1px solid var(--linea); }